最近用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/
网友评论