脚本宝典收集整理的这篇文章主要介绍了Vue+highligh.js实现语法高亮,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
highlight
官方用法如下:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
vue
开发的时候,很多人遇到如何使用的问题,一种方案是用过指令来实现,例如这篇文章介绍的https://segmentfault.com/a/11...;1.
highlight.js
的基本原理
CSS
,highlight.js
文件然后通过hljs.initHighlightingOnLoad()
方法进行渲染;下面介绍两个重要的方法,initHighlightingOnLoad()
和initHighlighting()
initHighlighting()
:主要是获取页面中的pre,code
标签,按照特定的规则为其添加样式,只执行一次。
//hightlight.js源码
function initHighlighting() {
if (initHighlighting.called) return; //如果被执行过,则返回,说明只执行一次
initHighlighting.called = true;//标记执行过
var blocks = document.querySelectorAll('pre code');//获取页面所有 pre ,code 标签
ArrayProto.forEach.call(blocks, highlightBlock);}//通过highlight.js的规则添加样式
initHighlightingOnLoad()
:监听页面加载事件,调用initHighlighting()
//hightlight.js源码
function initHighlightingOnLoad() {
addEventListener('DOMContentLoaded', initHighlighting, false);
addEventListener('load', initHighlighting, false);
}
2.
vue
+highligh.js
问题使用:这样使用会在页面渲染的时候会出现高亮效果,但是这导致的问题是,切换路由的时候代码高亮会消失。之所以产生这种现象,这跟 hljs.initHighlightingOnLoad()
的定义有关,因为只执行一次。
import hljs from 'highlight.js'
export default {
mounted(){
hljs.initHighlightingOnLoad()
}
}
解决方法:可以重写 hljs.initHighlighting()
方法,在组件的中是使用 hljs.highlightCode()
,每次页面加载的时候都会执行渲染代码的逻辑。
//在main.js中
import 'highlight.js/styles/googlecode.css'
import hljs from 'highlight.js'
hljs.highlightCode = function () { //自定义highlightCode方法,将只执行一次的逻辑去掉
let blocks = document.querySelectorAll('pre
code');
[].forEach.call(blocks, hljs.highlightBlock);
};
//在组件中
export default {
mounted(){
hljs.highlightCode()
}
}
以上是脚本宝典为你收集整理的Vue+highligh.js实现语法高亮全部内容,希望文章能够帮你解决Vue+highligh.js实现语法高亮所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。