公司某个项目有个高亮显示代码的功能，在网上找了下相关的插件，决定使用 highlight.js 这个插件，碰到一些问题，在这里记录一下。哪里说的不对欢迎大家来指正。
官网地址
安装
在项目根目录执行如下命令进行安装
npm install highlight.js
# or
yarn add highlight.js
使用
- 引入对应依赖
- 这种导入默认会注册所有语言
import hljs from 'highlight.js';
- 可以只导入核心库，并且注册你所需的语言，这样更高效
这里的语言可以参考包安装目录
highlight.js/lib/languages中对应的文件
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
hljs.registerLanguage('json', json);
- 注意：这里样式文件也要引入，否则样式不会生效，需要什么主题样式就引入对应文件就好。
更多主题样式可以参考这里 hightlight.js Themes
import 'highlight.js/styles/atom-one-light.css';
- 注册对应指令
v-highlightjs因为我就这一个页面使用了，直接作为局部指令进行注册了。
directives: {
highlightjs: {
deep: true,
bind: function(el, binding) {
const targets = el.querySelectorAll('code');
targets.forEach(target => {
if (binding.value) {
target.textContent = JSON.stringify(binding.value, null, 2);
}
hljs.highlightElement(target);
});
},
componentUpdated: function(el, binding) {
const targets = el.querySelectorAll('code');
targets.forEach(target => {
if (binding.value) {
target.textContent = JSON.stringify(binding.value, null, 2);
}
hljs.highlightElement(target);
});
},
},
}
这里就要注意一下JSON.stringify()的用法了，我使用的数据格式如下：
responseJson: {
msg: '',
success: true,
data: {
lifeCycle: '正式期',
},
}
如果我直接调用JSON.stringify(info.responseJson)，则展示出来会是下面这样，不会展开显示，
若是我把直接将上面赋值的代码改成
target.textContent = binding.value，并且数据格式改成字符串形式的：
responseJson: `{
msg: '',
success: true,
data: {
lifeCycle: '正式期',
},
}
`,
那么展示出来是下面这样的：乍一看好像可以，但是其实仔细看会发现，有些改高亮的代码不会高亮了，而且这么写数据格式也不是很方便，
后来我就去网上找了下，发现
JSON.stringify() 有三个参数。而第三个参数，正好就是我们需要的：
指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。 JSON.stringify()的其他参数介绍
于是，这里使用了JSON.stringify(binding.value, null, 2)，展示出来是这样的
- 使用
<pre v-highlightjs="info.responseJson"><code class="language-JSON"></code></pre>
-info.responseJson 是要格式化的代码
-class="language-JSON"其中JSON是指要处理的代码是哪种语言的。
更多语言可以参考这里 hightlight.js Language Categories
