Vue使用highlightjs实现代码高亮


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

使用highlight.js过程中遇到的问题：

  1. highlight提供了专门针对Vue的版本vue-highlightjs，可以直接使用，不用再自定义插件了。
  2. 选择highlight的代码风格，记得在main.js中导入。
  3. 使用highlight时遇到对象更新时View不更新的问题。

接下来，将直接使用vue-highlightjs教你实现Vue项目中的代码高亮：

1
npm install --save vue-highlightjs

main.js中引入

1
2
3
4
5
6
7
import Vue from 'vue'

import VueHighlightJS from 'vue-highlightjs'
// 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
import 'highlight.js/styles/github.css'

Vue.use(VueHighlightJS)

template中使用

1
2
3
4
5
<!-- If your source-code lives in a variable called 'sourcecode' -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>
 
<!-- If you want to highlight hardcoded source-code -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre><p><center>[wp_ad_camp_3]</center></p>

注意：

  • data中的变量使用v-highlightjs="sourcecode", 变量为字符串类型
  • 对code标签起作用

详情看源码：https://github.com/metachris/vue-highlightjs/blob/master/index.js