0. 前言

在 vue-cli3 項目中，通過highlight.js，實現(xiàn)頁面中代碼高亮。

請先了解highlight.js官網(wǎng)中的使用說明。

1. 安裝

npm install highlight.js --save

2. 封裝成vue插件

官方文檔---自定義插件

官方文檔---自定義指令

新建highlight.js文件，并添加：

// src/utils/highlight.js 文件路徑，純屬自定義

// highlight.js  代碼高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night.css'; // 代碼高亮風格，選擇更多風格需導入 node_modules/hightlight.js/styles/ 目錄下其它css文件

let Highlight = {};
// 自定義插件
Highlight.install = function (Vue) {
    // 自定義指令 v-highlight
    Vue.directive('highlight', {
        // 被綁定元素插入父節(jié)點時調(diào)用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;

3. 全局引入自定義插件

在src/main.js中：

// highlight.js代碼高亮插件
import Highlight from './utils/highlight'; // from 路徑是highlight.js的路徑，純屬自定義
Vue.use(Highlight);

4. 使用

<div id="codeView" v-highlight>
    <pre><code v-html="code"></code></pre>
</div>

code是代碼的字符串形式，比如：

"0x0000000000400da0 <+0>:\tpush\t%rbx\n0x0000000000400da1 <+1>:\tcmp\t$0x1,%edi\n0x0000000000400da4 <+4>:\tjne\t0x400db6 <main+22>\n"

更換更多的代碼高亮風格，需要切換highlight.js中導入的css文件。