vue 中highlight 代码无法高亮
2021-03-05 本文已影响0人
zhumu3
问题
在vue中使用代码高亮插件highlight.js的时候,始终无法生效代码高亮。这里我选择了 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>;
Highlight.js
的使用说明比较简陋,不仔细看根本不知道样式文件在 highlight.js/src/styles
文件夹中,并需要自己手动引入。
<!--引入样式文件才有高亮效果-->
<link rel="stylesheet" href="./highlight/styles/default.css">