Vue2 中使用 highlight 代码高亮插件

安装

通过npm安装，淘宝镜像用cnpm命令

npm install --save vue-highlightjs

使用 vue-highlightjs

在主入口 文件 (如 main.js):

// 导入 Vue 和 vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'

// 告诉Vue 要使用插件 vue-highlightjs
Vue.use(VueHighlightJS)

在 template 模板中加入代码高亮:

<!-- 如果是动态加载内容如变量 'sourcecode' 赋值再渲染，可用以下方式 -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

<!-- 也可以直接写内容在标签中 -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>