安裝
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 進(jìn)行處理
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)簽后面,不能后空格,不然首行縮進(jìn)會有問題
這是由于行內(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
