认真看完一定会有所收获
可以参考如下博客
链接：
专为开发者准备的10个优秀JavaScript语法高亮库
前端网页代码高亮显示的7种常用插件
@{
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>
下面的项目非常优秀，是我解决该问题的灵感来源，感谢！！！项目GitHub地址如下，可以下载学习
highlight-js-demo
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;
}