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