項目環(huán)境

近期在做舊項目的重構(gòu)，在搭建新項目的時候使用了Vue+Typescript，在前期的準(zhǔn)備工作時，想做一套針對于公司的ui組件庫，element-ui很好，但是個人喜歡花里胡哨。希望用戶能操作的元素上增添些動畫效果。故而自己開始設(shè)計些常有的效果組件。所有使用到了highlight.js這個插件。

一、安裝Highlight.js依賴項

npm install --save highlight.js

二、自定義Vue.js指令：v-highlightjs

在Vue.js組件中使用highlight.js，我們將創(chuàng)建一個名為highlightjs的自定義Vue.js指令。在main.ts文件中直接聲明此指令：

// 代碼高亮插件
import hljs from 'highlight.js';
// 必須導(dǎo)入 否則沒樣式
import 'highlight.js/styles/atom-one-dark-reasonable.css';
const high: any = {
  deep: true,
  bind: function (el: any, binding: any) {
    const targets = el.querySelectorAll('code')
    targets.forEach((target: any) => {
      if (binding.value) {
        target.textContent = binding.value;
      }
      (hljs as any).highlightBlock(target);
    })
  },
  componentUpdated: function (el: any, binding: any) {
    const targets = el.querySelectorAll('code')
    targets.forEach((target: any) => {
      if (binding.value) {
        target.textContent = binding.value;
        (hljs as any).highlightBlock(target);
      }
    })
  }
}
Vue.directive('highlightjs', high)

三、使用v-highlight.js

<pre v-highlightjs><code class="javascript">{{ sourcecode }}</code></pre>

<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

四、選擇樣式

highlightjs官網(wǎng)
選擇想要的styles，然后在main.ts的導(dǎo)入樣式文件給替換成對應(yīng)的右側(cè)文件即可