前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lighlight库使用说明</title>
    <link href="/lib/highlight/css/default.min.css" rel="stylesheet" />
    <script src="/lib/highlight/highlight.min.js"></script>
    <script src="/lib/highlight/lodash.min.js"></script>
    <style>
        
    </style>
</head>
<body>
    <pre>
        <code id="content" class="language-xml"></code>
    </pre>
    
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    
    <script>
        let  el = document.querySelector('#content')
        el.innerHTML=_.escape('服务端从数据库查询到的代码字符串');
        hljs.highlightElement(el);
    </script>

</body>
</html>

仔细研究学习上述代码就可以实现核心功能
注意： escape() 方法是lodash库中的方法，作用是将字符串转译成html，下方有该库的GitHub地址
高亮方法11.0版本之前使用 hljs.highlightBlock(block)方法；11.0版本之后使用hljs.highlightElement(el)方法
初始化方法10.6版本之前使用hljs.initHighlightingOnLoad()方法；10.6版本后使用hljs.highlightAll()方法
相关博客web网页代码高亮显示js插件highlight.js

需要用到其它JavaScript库

lodash库
lodash库官网

解决相关功能的类似项目

下面的项目非常优秀，是我解决该问题的灵感来源，感谢！！！项目GitHub地址如下，可以下载学习
highlight-js-demo

关于前端内容的相关工具

html转译工具网址
原生方法JS处理html的编码(encode)与解码(decode)
jQuery学习之DOM节点的插入方法总结
jquery怎么给p标签赋值
jquery获取html元素内容的方法

其它内容

使用jQuery格式化xml串

function formatXml(xml) {
     var formatted = '';
     var reg = /(>)(<)(\/*)/g;
     xml = xml.replace(reg, '$1\r\n$2$3');
     var pad = 0;
     jQuery.each(xml.split('\r\n'), function(index, node) {
      var indent = 0;
      if (node.match( /.+<\/\w[^>]*>$/ )) {
       indent = 0;
      } else if (node.match( /^<\/\w/ )) {
       if (pad != 0) {
        pad -= 1;
       }
      } else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
       indent = 1;
      } else {
       indent = 0;
      }
      var padding = '';
      for (var i = 0; i < pad; i++) {
       padding += '  ';
      }
      formatted += padding + node + '\r\n';
      pad += indent;
     });
     return formatted;
    }

JavaScript+pre标签实现JSON格式化展示
layui框架中的代码高亮layui-code
xml格式化可是使用 vkbeautify模块

前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)

目录

前端代码高亮JavaScript库

为什么选择lighlight.js库

关于lighlight.js库

使用lighlight.js库

需要用到其它JavaScript库

解决相关功能的类似项目

关于前端内容的相关工具

其它内容