安装
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 标签后面,不能后空格,不然首行缩进会有问题
这是由于行内标签之间空白会在在页面上显示的原因
不同的语言只需修改 code 标签的 class 值, 想要使用不同的主题只需引入对应的 css
highlight 支持的语言以及不同样式
地址
效果图
image.png
FAQ
想在同一个页面使用不同的 highlight.js 主题高亮代码, 后面使用的会覆盖掉前面的主题.
原因是 highlight.js 是通过引入不同的 css 文件实现不同的高亮颜色.类名都是一样的
解决方法: 通过接受父组件的 theme 来定义组件最外层 div的类名,以此 来运用不同的样式
比如运用默认主题, theme 为 default, .dv-json-editor--default为组件最外层div类名
<template>
<div :class="'dv-json-editor--' + theme">
...
</div>
</template>
<script>
..
props: {
theme: String,
default: 'default'
}
...
</script>
新建一个 less 文件
// 对应默认主题
.dv-json-editor--default {
// 复制 highlight.js/style/default.css
}
// 对应 monokai 主题
.dv-json-editor--monokai {
// highlight.js/style/monokai.css
}
无需在组件中
import 'highlight.js/style/default.css', 只需引入我们新建的less文件
实现效果
theme 为 atom-one-light 和 monokai 时
image.png
