代码格式化，高亮显示，这在我们开发过程中都是司空见惯的功能，各种编辑器都有，在好多网站上也可以在线格式化代码，但是如何在我们的前端页面上插入一段格式化后高亮显示的代码呢？有些小伙伴可能还不会，那么看完这篇文章之后肯定就学会了。
效果图如下：
自己要去找实现方法可能很难也很花时间，但是别人总结好的东西就会给你省下很多事情了。
多看多总结多分享，跟大家一起进步，加油！！
好了，下面步入正题吧。
<!DOCTYPE html><html><head><meta charset="utf-8"><!-- 引入jquery作为辅助工具 --><script type="text/javascript" src="js/jquery-1.4.2.js"></script><!-- SyntaxHighlighter，用于对代码进行高亮的插件 --><!-- SyntaxHighlighter插件的核心文件 --><script type="text/javascript" src="src/shCore.js"></script><!-- <script type="text/javascript" src="src/shAutoloader.js"></script> --><!-- 用于对html代码并进行高亮处理 --><script type="text/javascript" src="scripts/shBrushXml.js"></script><!-- 用于对js代码并进行高亮处理 --><script type="text/javascript" src="scripts/shBrushJScript.js"></script><!-- 用于对css代码并进行高亮处理 --><script type="text/javascript" src="scripts/shBrushCss.js"></script><!-- 用于对html代码进行格式化 --><script type="text/javascript" src="extra/html_format.js"></script><!-- 用于对js代码进行格式化 --><script type="text/javascript" src="extra/js_format.js"></script><!-- 用于对css代码进行格式化 --><script type="text/javascript" src="extra/css_beautify.js"></script><!-- SyntaxHighlighter插件的核心样式表 --><link type="text/css" rel="stylesheet" href="styles/shCore.css" /><!-- SyntaxHighlighter插件的默认样式表 --><link type="text/css" rel="Stylesheet" href="styles/shCoreDefault.css" /><!-- SyntaxHighlighter插件的默认主题样式表，可以自己设置主题 --><link type="text/css" rel="Stylesheet" href="styles/shThemeDefault.css" /><title>测试代码高亮</title></head><body><!-- 杂乱的css代码，用于进行测试 --><style id="css_code">input {line-height: 32px;outline: none;border: 1px solid violet;}</style><!-- 杂乱的html代码，用于进行测试 --><div id="ahri"><div><p><input type="text"><input type="number"><input type="checkbox"><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button></p></div><p><span><button type="button">button</button></span><span><button type="reset">reset</button></span><span><button type="submit">submit</button></span></p></div><!-- 杂乱的js代码，用于进行测试 --><script id="js_code">function ahri() {const map = new Map([['? ?', '你在教我做事？？'],[new Array(5).fill('??'), '你不对劲']]);console.log(map.get('? ?'));}</script><!-- 用于显示格式化后高亮的html代码 --><div id="kurumi"></div><!-- 用于显示格式化后高亮的js代码 --><div id="leona"></div><!-- 用于显示格式化后高亮的css代码 --><div id="dianna"></div><div><h2>who's your daddy</h2></div><script type="text/javascript">format();function format() {// 获取要进行处理的html代码内容html_code = document.getElementById('ahri').innerHTML.replace(/^\s+/, '');tabsize = 2;// 缩进位数tabchar = ' ';// 缩进方式为空格if (tabsize == 1) {tabchar = '\t';// 缩进方式为tab}// SyntaxHighlighter插件处理代码高亮时需要使用到pre标签var pre = document.createElement('pre');// 设置pre标签的class名称为这个就可以对html代码进行高亮处理pre.className = "brush: html;"if (html_code && html_code.charAt(0) === '<') {// 使用style_html方法对html代码进行格式化pre.innerHTML = style_html(html_code, tabsize, tabchar, 80);} else {// 使用js_beautify方法对js代码进行格式化pre.innerHTML = js_beautify(html_code, tabsize, tabchar);}// 将pre标签内容加入到dom中$(`#kurumi`).append(pre);// 获取js代码内容js_code = document.getElementById('js_code').innerHTML.replace(/^\s+/, '');// 创建pre标签同上var js_pre = document.createElement('pre');// 这里的class名称要设置要变为以下内容js_pre.className = "brush: jscript;"// 对js代码进行格式化js_pre.innerHTML = js_beautify(js_code, tabsize, tabchar);// 将pre标签内容放入到dom中$('#leona').append(js_pre);// css代码格式化的方法的配置参数var options = {indent: ' ',// 缩进使用空格或 \t（tab）// openbrace: 'separate-line'// 使用第一个{的时候是否换行}// 获取css代码内容var css_code = document.getElementById('css_code').innerHTML.replace(/^\s+/, '');// 创建pre标签同上var css_pre = document.createElement('pre');// 将class名称改一下css_pre.className = "brush: css;"// 格式化css代码css_pre.innerHTML = cssbeautify(css_code, options);// 将pre标签内容放入到dom中$('#dianna').append(css_pre);// 配置一下SyntaxHighlighter插件Object.assign(SyntaxHighlighter.defaults, {toolbar: false,// 是否显示帮助的?按钮'quick-code': false// 是否双击后编辑代码})// 调用此方法就可以将代码进行高亮了// 如果使用SyntaxHighlighter.all()无法出现代码高亮效果，就直接使用SyntaxHighlighter.highlight();SyntaxHighlighter.all();}</script></body></html>
代码基本都很简单，如果想要实现更多的功能可以去看看工具方法的源码，我也是看了源码慢慢摸索出来的，希望能对大家有所帮助。
源代码可以在这里自行下载查看。
如果大家对高亮代码的颜色有所要求，那么也可以自己设置代码高亮颜色，参考方法如下：
我们可以参考VScode的主题样式来配置自己的代码高亮展示
在VScode中打开开发者模式，我们就可以像在浏览器中那样查看VScode编辑器中的代码主题颜色样式了，然后在页面上也同样打开开发者模式，一个个元素去对照，修改对应的css文件就可以达到我们自定义代码高亮主题色彩的目的了。
