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()
    }    
  }