文章目录
js 实现代码格式化调用 api实现代码高亮引入用法highlight.js 高亮代码不换行innerText 和 innerHTML 有什么区别解决 innerHTML 渲染为真实节点的问题上色后都是 span 标签，是怎么做到换行的？vue 中使用 highlight.js用指令使用 js_beautify关于文章开头的编辑器获取的代码再次格式化格式乱了实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）
用的是 vue+ Highlight.js + js-beautify
效果如下图
js 实现代码格式化
首先我们会用到<pre></pre>和<code></code>标签，包裹我们要展示的 html 代码，因为只有这样他们才能保持换行/缩进等
格式化代码用到的是 js-beautify
js-beautify 是分别为 js,css,html 提供了 3 个 JS，不必一次性引入那么多不需要的内容，比如我要实现的效果只需要引入 html 的即可
cdn 方式：
<script src="/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script><script src="/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script><script src="/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>
npm 方式
npm install js-beautify@next
import {js_beautify, css_beautify, html_beautify } from 'js-beautify'
调用 api
<pre><code id="html_code"></code></pre><pre><code id="css_code"></code></pre><pre><code id="js_code"></code></pre><script>document.querySelector('#html_code').innerText = html_beautify('<div><div>html格式化</div><div>第二行</div></div>',{indent_size: 2,space_in_empty_paren: true})document.querySelector('#css_code').innerText = js_beautify('body{background:red;width:100%;}', {indent_size: 2,space_in_empty_paren: true})document.querySelector('#js_code').innerText = css_beautify("var test = 'a';function(){console.log('test',test)}",{indent_size: 2,space_in_empty_paren: true})</script>
配置项的参数有很多，具体可以参照 GitHub 提供的参数配出相应的格式注意pre 标签后，不要有空格和回车，不然也会渲染出来，也一定要有pre标签，不然代码缩进的空格也渲染不出来
小小吐槽一下html_beautify，感觉这个 api 有点鸡肋，还不如 innerHtml 来得快，比如
<pre><code id="html_template_code"></code></pre><div style="display: none;" id="html_template"><div><h1>标签格式化</h1><div>html格式化</div></div></div><script>document.querySelector('#html_template_code').innerText = document.querySelector('#html_template').innerHTML</script>
也能达到一样的效果，并且还少引入了一个库~
实现代码高亮
用到的就是 highlight.js
highlight.js 中文网、highlight.js 官网
引入
cdn 模式<!-- 核心的JS库 --><script src="/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script><!-- 代码高亮的样式 --><link href="/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet" />
npm 模式
npm install highlight.js// highlight.js 代码高亮指令import Hljs from "highlight.js";import "highlight.js/styles/stackoverflow-light.css"; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
用法
在对应的code/pre标签上，标注上对应的语言，比如：
<pre><code class="language-html"></code></pre><pre><code class="language-javascript"></code></pre><pre><code class="language-css"></code></pre>
在页面渲染好了之后，执行下面的方法，就可以高亮代码了
hljs.highlightAll()
如果节点是往后渲染，或者你只想更新某个代码块，可以用下面的方法
hljs.highlightBlock(document.querySelector('#html_code'))
更多的还有hljs.config等 api，可以翻一下文档
highlight.js 高亮代码不换行
如下图，刚才用 js-beautify 还搞的好好的，高亮后换行都没了
有文章说是 pre 的 css 问题，其实研究一下高亮后的 html，其实和 pre 没多大关系，如果你没写pre标签那就真的有关系
看下正确示范：
怎么做到的？把innerText，改为innerHTML。下面仔细说说
innerText 和 innerHTML 有什么区别
渲染后界面看上去确实是一样的，改换行的换行，改空格的空格，不过内部的 html 就很不一一样。
innerText方法显然把代码块有换行的地方帮我们替换了<br>标签innerHtml方法则是把 html 代码给渲染了出来
highlight.js执行高亮的时候是针对 dom 节点，然后改变 dom 节点插入标签进行高亮的，显然把代码中的<br>标签给过滤了（因为看到文档有一个是否使用<br>标签的配置，所以自身的 br 标签就和他冲突了，纯属个人猜测）
解决 innerHTML 渲染为真实节点的问题
html = html.replace(/</g, '<').replace(/>/g, '>')html = html.replace(/</g, '<').replace(/>/g, '>')
也是 innerHTML 和 innerText 的区别，innerHTML 时会进行编码重新转换，把<>重新渲染为字符，innerText 则是字符原样输出
别看第一段代码块没换行，其实中间的空格符隐藏了\n。所以这也是为啥强调要用pre和code标签的原因，普通的div或者其他标签都会把\n和连续的空格给过滤掉。
上色后都是 span 标签，是怎么做到换行的？
明白了上面的内容后，再来看一边上色效果
代码块如下：
再怎么看，这都是span标签，那 span 标签是怎么控制什么时候换行，什么时候不换行，纯 css 是做不到的，答案还是\n
所以明白为什么 br 无效 \n 有效，为啥要用 innerHTML 了把
vue 中使用 highlight.js
使用方式有很多种，可以用上面的hljs的 api 进行。也可以用 vue 的特性（自定义指令）来完成这一系列的东西
import Hljs from 'highlight.js'let Highlight = {}// 自定义插件Highlight.install = function(Vue) {// 自定义指令 v-highlightVue.directive('highlight', {// 被绑定元素插入父节点时调用inserted: function(el) {Hljs.highlightBlock(el)},// 指令所在组件的 VNode 及其子 VNode 全部更新后调用componentUpdated: function(el) {Hljs.highlightBlock(el)}})}export default Highlight
指令写好后记得要用 Vue 注册一下：
import Vue from 'Vue'import Highlight from '上面那段代码的对应目录'Vue.use(Highlight)// 使用的时候<code v-highlight>这里写代码</code>
用指令使用 js_beautify
结合上面的指令，直接封装一个，先格式化代码，在高亮代码的指令!
贪图方便我就不用项目了，直接建了个 html，用 cdn 引入对应的库实现了一个
核心的要点上面也都说过了，当然代码还有更好的实现方式和更多的拓展性，剩下的就多看文档了~
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script><script src="/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script><script src="/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script><script src="/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script><link href="/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet" /><script src="/ajax/libs/vue/2.6.9/vue.min.js"></script></head><body><div id="app"><pre><code v-code class="language-html"><div><div>html格式化</div><div>第二行</div></div></code></pre><hr /><pre><code v-code class="language-css">body{background:red;width:100%;}</code></pre><hr /><pre><code v-code class="language-javascript">var test = 'a';function(){console.log('test',test)}</code></pre></div><script>let code = {}function getBeautifyCode(el) {if (!el || !el.innerHTML) return ''var code = el.innerHTML || ''let className = el.classList ? el.classList.value || '' : ''if (className.indexOf('html') !== -1) {code = html_beautify(code).replace(/</g, '<').replace(/>/g, '>')}if (className.indexOf('css') !== -1) {code = css_beautify(code)}if (className.indexOf('javascript') !== -1) {code = js_beautify(code)}return code}code.install = function(Vue) {Vue.directive('code', {// 被绑定元素插入父节点时调用inserted: function(el) {el.innerHTML = getBeautifyCode(el)hljs.highlightBlock(el)},// 指令所在组件的 VNode 及其子 VNode 全部更新后调用componentUpdated: function(el) {el.innerHTML = getBeautifyCode(el)hljs.highlightBlock(el)}})}Vue.use(code)new Vue({el: '#app'})</script></body></html>
关于文章开头的编辑器
在上诉的步骤都完成了之后，并不能在编辑器这么使用，因为编辑器和 vue 并没有什么特定的 dom 节点的关系（在编辑器加载后，vue 上的数据并不会影响编辑器的内容，只能通过编辑器的 onchange 来给 vue 同步数据）
所以先用指令，生成一段 html 代码，拿到 v-code 渲染后的 innerHtml，在插入到编辑器中，注意编辑器中也要用pre包裹着要插入的 html 代码，由于各个富文本编辑器都不太一样，也就不好展开~
获取的代码再次格式化格式乱了
如果你也有编辑器的这种需求，在进行一系列改动后执行保存操作(getContent)。拿到改动后的 html 代码，提交给接口，刷新列表，把新的数据重新赋值到编辑器的时候发现js-beautify不生效了？！
这是因为进过我们格式化和代码高亮过后的代码，已经存在了很多空格和换行符，其实这些空格（或者称为缩进）是我们不想保存的，保存了这部分缩进后下次进行代码格式化的时候js-beautify会认为这是故意留下的回车/空格符，导致一系列的问题
所以在我们再次获取到 html 代码的时候执行一个操作:
html = html.replace(/[\r\n]/g, '').replace(/>\s*?</g, '><')
把换行符和 2 个尖括号中间的内容的非字符，都替换掉，就可以了
