vue中显示代码块-代码块高亮

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

今天遇到了一个项目需求，将代码块显示到页面上，而且还需要高亮美化，然后在网上找了一个库（highlight.js），然后简单学习了一下，使用起来很简单方便。

highlight.js是基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可以选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容。

需求

解决

可以参考官方网站highlightjs.readthedocs.io/en/latest/

1.使用npm安装包

npm install highlight.js

2.在main.js中引入

//导入代码高亮文件
import hljs from 'highlight.js'
//导入代码高亮样式
import 'highlight.js/styles/monokai-sublime.css'

3.在main.js中自定义指令并初始化

//定义一个代码高亮指令
Vue.directive('highlight', function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block) => {
    hljs.highlightBlock(block)
  })
})
// 初始化
Vue.prototype.$hljs = hljs;

4.在页面中使用

<div style="width: 100%; height: 500px; overflow: auto" v-highlight>
    <pre>
      <code>
        <!-- 代码区 -->
          serviceHeaders: [
            {
              label: "服务id",
              prop: "serveId",
            },
            {
              label: "服务实例id",
              prop: "serveLivingId",
              width: "100",
            },
            {
              label: "大版本",
              prop: "bigVersions",
            },
          ],
        <!-- 代码区结束 -->
      </code>
    </pre>
</div>

5.显示效果

highlight.js支持显示那些语言

可参考highlightjs.readthedocs.io/en/latest/s…

原则上系统会自动检测你的代码的内容，也可以在<code>标签中用class属性指定语言类别，上面代码中指定为json语言。 如果你的代码里包含标签，需要对标签进行转义。将标签里的"<"换成"&lt"，把">"换成"&gt"

代码样式修改

可以在node_modules里找到highlight文件夹，里面的style文件夹，有很多的css文件，这些文件可以更改代码的css样式，包括高亮的颜色和背景色(主题色)。想使用哪种样式只需要导入这个样式的css文件即可。