Vue组件Vue-highlight 实现代码高亮

一、前言

highlight.js 支持几十种编程语言（点击下载），既包括常见的 C、java、javascript、ruby、python、html、css、sql等，还支持 apache、nginx 这些配置文件的语法。

除了引入Vue-highlight.js文件外，还需要引入样式文件highlight.js。vue-highlight.js只是实现了代码高亮的功能，安装包里是没有css样式文件，因此我们还需要安装一个highlight.js来实现真正的样式。

二、安装

npm install --save vue-highlightjs

三、引用

在我们的入口文件main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

我们使用的是atom-one-dark.css这个样式文件，可以根据highlight.js网上的面配色自定义展示效果。也可以看项目中安装的highlight.js中的文件去看是否具备这个样式表。

四、使用

因为已经实现了vue的组件指令化，所以使用起来非常简便。

<!-- 1.如果你需要高亮的代码是一个变量值，那么你可以这样使用它。 其中 sourcecode 为变量。 -->
<pre v-highlightjs="sourcecode"><code></code></pre>

<!-- 2.如果你需要高亮的代码固定的源代码，那么你可以这样使用它。 -->
<pre v-highlightjs><code>const s = new Date().toString()</code></pre>

五、拓展阅读

• hignlight.js官网
• highlight.js demo
• vue-highlightjs github
• 自定义插件官方文档
• 自定义指令官方文档