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">
上一篇下一篇

猜你喜欢

热点阅读