安裝

npm install highlight.js 
// or
yarn add highlight.js

引入

<script>
import  hljs  from 'highlight.js';  
// 樣式文件
import('highlight.js/styles/atom-one-light.css');
</script>

定義指令

<script>
export default {
  directives: {
    highlightjs: {  
       inserted (el) {  
            // 遍歷元素并且使用 highlight 進行處理 
           const preEl = document.querySelectorAll('pre code');
           preEl.forEach(el => {
            hljs.highlightBlock(el);
          });
       }
    }  
  }
}
<script>

使用

<template>
        <pre v-highlightjs>
          <code class="json" spellcheck="false">{{value}}</code>
        </pre>
<template>

!!! value 必須在 code 標(biāo)簽后面,不能后空格,不然首行縮進會有問題
這是由于行內(nèi)標(biāo)簽之間空白會在在頁面上顯示的原因

不同的語言只需修改 code 標(biāo)簽的 class 值, 想要使用不同的主題只需引入對應(yīng)的 css

highlight 支持的語言以及不同樣式
地址

效果圖

image.png

FAQ

想在同一個頁面使用不同的 highlight.js 主題高亮代碼, 后面使用的會覆蓋掉前面的主題.
原因是 highlight.js 是通過引入不同的 css 文件實現(xiàn)不同的高亮顏色.類名都是一樣的

解決方法: 通過接受父組件的 theme 來定義組件最外層 div的類名,以此 來運用不同的樣式

比如運用默認(rèn)主題, theme 為 default, .dv-json-editor--default為組件最外層div類名

<template>
    <div :class="'dv-json-editor--' + theme">
      ...
    </div>
</template>
<script>
  ..
      props: {
        theme: String,
        default: 'default' 
      }
...
</script>

新建一個 less 文件

// 對應(yīng)默認(rèn)主題
.dv-json-editor--default {
      // 復(fù)制 highlight.js/style/default.css 
}

// 對應(yīng) monokai 主題
.dv-json-editor--monokai {
      // highlight.js/style/monokai.css
 }

無需在組件中 import 'highlight.js/style/default.css', 只需引入我們新建的 less 文件

實現(xiàn)效果

theme 為 atom-one-light 和 monokai 時

image.png