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() 方法的问题，其实在官方文档中也有解释。