在Vue中使用highlight.js

placeless發表於2017-01-21
VueJS

https://cheerego.github.io/20…

通過自定義指令的方式來實現在Vue中實現語法高亮

問題

highlight.js如果在Vue中使用，這個問題一直困擾著我，而highlight.js的使用說明太過於簡單，完全不知道怎麼使用。

// 完全是一臉懵B的，而且不管經過怎麼使用都無法實現程式碼高亮的效果
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

在highlight.js的Usage有這麼一個方法我覺得我使用得到的

$(document).ready(function() {
  $(`pre code`).each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

實現

安裝

npm install highlight.js

編碼

Vue自定義指令 文件

// Vue-cli生成的工程檔案的src/main.js
import hljs from `highlight.js`
import `highlight.js/styles/googlecode.css` //樣式檔案
Vue.directive(`highlight`,function (el) {
  let blocks = el.querySelectorAll(`pre code`);
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

使用

<p v-html="markdownhtml" v-highlight></p>

到這裡我們就打工告成了。

封裝成外掛

編寫外掛

// highlight.js
import Vue from `vue`
import Hljs from `highlight.js`
import `highlight.js/styles/googlecode.css`
let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive(`highlight`, function (el) {
    let blocks = el.querySelectorAll(`pre code`);
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

使用外掛

import Highlight from `path/to/Highlight.js`
Vue.use(Highlight)

相關文章