vue使用highlight.js及相关记录

最近用vue.js+django做了一个单页blog，用marked.js解析markdown，但是代码没有高亮，看起来很丑。就用highlight.js高亮代码，用法很简单

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

直接三行代码就能实现，然而在单页应用中不能高亮。
查了很多资料知道是vue-router的问题，在路由改变时，页面将会重新渲染并且会移除事件，这里就把 highlight 的事件给移除了。

得到的解决方案是使用 Vue.js 的自定义指令，定义一个v-highlight 的指令来使得 pre code 中的代码高亮。

  #引入必要库
  <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
  <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  

      Vue.directive('highlight',function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
          hljs.highlightBlock(block)
        })
      })

      #在要使用高亮的地方使用v-highlight指令
      <div v-html="Marked" v-highlight>
      </div>

到此就能实现高亮了

我的效果图

2222847-4ada38e85940c7a6.png

行号插件工具：https://github.com/wcoder/highlightjs-line-numbers.js/

使用 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'

然后主可以看到代码高亮的效果，通常是这样的。

2994823444-5ab60a6526265_articlex.png

看起来还不错，但这样的高亮有个问题，那就是他的背景色并不随着你所加载了 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()的原因。（实际上自己在此坑了很久，查阅不少文档才找到这一原因）

做完这些之后再看渲染效果：

222.png

果然好多了！

后记

既然是自己渲染代码高亮，那么其实 loader 中对代码块块的处理就不必要甚至显得有点儿多余了，因为这些处理会增加一些计算量。所以你也可以找一些别的 loader 来替代 vue-markdown-loader,甚至尝试自己写一个 loader。

对于一个软件，官方文档是有必要仔细读的，就像前面提到的 highlight.js 中 initHighlighting() 方法的问题，其实在官方文档中也有解释。

---

技术博客里，最常见的就是代码了，没有语法高亮的代码，简直没法看下去。

常用的语法高亮 JS 库有 Highlight.js，Prism，SyntaxHighlighter 等等，它们的主要工作原理就是搜索 document 中的 <pre><code> 标签，再对其中内容进行正则匹配，识别出使用的语言并为某些内容添加 class，最后根据 CSS 渲染样式。

问题

最近在写一个博客应用（开发中），语法高亮交给前端完成，这里我选择了 Highlight.js 作为语法高亮插件。

因为做的是单页应用，前端框架使用的是 Vue，用 Webpack 作为脚手架，所以很自然地 npm i -S highlight.js 安装，之后把 hljs.initHighlightingOnLoad(); 添加到代码里…

欸？为什么明明 hljs 已经注册为全局变量了，但是高亮不工作？是不是我的姿势不对？

解决

搜索了很多文章，之后发现是 Vue-Router 的锅，在 $route 改变进行跳转时，vue 会重新渲染页面，并移除页面上所有事件。所以在渲染页面后，监听已经被移除了，也就不会再进行语法高亮了。

有两种解决方案：

Vue 自定义指令：

使用 Vue 的自定义指令，可以在内容渲染时才搜索对应内容中的 <pre><code> 标签，控制更方便。

        import hljs from 'highlight.js';
        Vue.directive('hljs', el => {
          let blocks = el.querySelectorAll('pre code');
          Array.prototype.forEach.call(blocks, hljs.highlightBlock);
        });

使用方法也很简单，在需要进行代码高亮的地方，加上 v-hljs 即可：

<div class="post-content" v-html="postData.content" v-hljs></div>

渲染后重新监听：

        this.getReady(); // Ready
         hljs.initHighlightingOnLoad()；

这要根据实际使用情况修改代码，没有第一种方法简单。这里就是在 Ajax 获取数据成功后，重新监听。

FAQ：

Q：为什么明明转换成功了，但是就是不见高亮？

A：Highlight.js 的使用说明比较简陋，不仔细看根本不知道样式文件在 highlight.js/src/styles 文件夹中，并需要自己手动引入。

Q：我明明使用的是 railscasts 的黑底样式，为什么总有一个 github 的白底样式，是不是会自动引入样式的，要怎么配置呢？

A：Highlight.js 不会自动引入样式，也无法配置。遇到这个问题可能是因为 PHP 的 DebugBar 会内置 github 样式，而且会覆盖手动引入的样式，需要关掉 DebugBar 或修改样式文件提高优先级。

参考：

http://www.ahonn.me/2016/07/13/getting-highlightjs-to-work-with-vue.js/