highlight.js 在 Vue 中使用的一點兒經驗

使用 markdown 來給程序寫文檔是很是方便的，自從用順了 markdown 以後，都好久沒打開過 Word 了。

既然是程序的文檔，少不了須要插入一些示例代碼，而對代碼進行語法高亮渲染並配以合適的顏色主題，會讓文檔顯得更炫，也更便於閱讀。

要實現文檔代碼高亮渲染其實並不難。

實現方法

首先，把 markdown 文件加載爲 vue 組件，這須要一個合適的 loader，本身目前使用 vue-markdown-loader。webpack 配置的 module.rules 中進行以下配置：

{
    test: /\.md$/,
    loader: 'vue-markdown-loader',
    options: {
        preset: 'default',
        breaks: true,
        preventExtract: true
    }
}

而後就能夠在項目中直接 import md 文件了。好比：

<template>
    <MyMarkdown/>
</template>

<script>
export default {
    components: {
        'MyMarkdown': () => import('xxx.md')
    }
}
</script>

固然，一般狀況下，咱們會與 vue-router 一塊兒使用，把 md 文件做爲一個視力組件加載到 router-view 中去。

{
    path: 'path/home',
    component: () => import('../markdown/home.md')
},

看到這裏可能奇怪，這些與文題中提到的 highlight.js 有毛關係？這是由於，vue-markdown-loader 中已經內置了對代碼高這的支持。你只須要在頁面中引入相關的樣式，例如：

import 'highlight.js/styles/atom-one-dark.css'

而後主能夠看到代碼高亮的效果，一般是這樣的。

看起來還不錯，但這樣的高亮有個問題，那就是他的背景色並不隨着你所加載了 highlight.js 主題樣式而改變，並且不一樣語言的代碼在配色上的一些差別也沒有很好的渲染出來。而從 highlight.js 官網示例能夠看到，這些問題本不該該出現的。

爲了實現與 highlight.js 官網示例中的主題效果，能夠在頁面中本身完成代碼高亮的渲染。

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

const highlightCode = () => {
  const preEl = document.querySelectorAll('pre')

  preEl.forEach((el) => {
    hljs.highlightBlock(el)
  })
}

export default {
    mounted () {
        highlightCode()
    },

    updated () {
        highlightCode()
    }
}
</script>

能夠看到，代碼中使用了 highlight.js 的 highlightBlock() 方法而不是官方默認示例裏提到的 initHighlighting()，由於後者通常用於靜態頁面的渲染。若是使用它，當使用 vue-router 導航到一個新的‘頁面’以後，新頁面中的代碼塊可能沒法被正確渲染。這也是爲何在 updated 鉤子中再次調用 highlightCode()的緣由。（實際上本身在此坑了好久，查閱很多文檔才找到這一緣由）

作完這些以後再看渲染效果：

果真好多了！

後記

既然是本身渲染代碼高亮，那麼其實 loader 中對代碼塊塊的處理就沒必要要甚至顯得有點兒多餘了，由於這些處理會增長一些計算量。因此你也能夠找一些別的 loader 來替代 vue-markdown-loader,甚至嘗試本身寫一個 loader。

對於一個軟件，官方文檔是有必要仔細讀的，就像前面提到的 highlight.js 中 initHighlighting() 方法的問題，其實在官方文檔中也有解釋。