项目环境
近期在做旧项目的重构，在搭建新项目的时候使用了Vue+Typescript，在前期的准备工作时，想做一套针对于公司的ui组件库，element-ui很好，但是个人喜欢花里胡哨。希望用户能操作的元素上增添些动画效果。故而自己开始设计些常有的效果组件。所有使用到了highlight.js这个插件。
一、安装Highlight.js依赖项
npm install --save highlight.js
二、自定义Vue.js指令：v-highlightjs
在Vue.js组件中使用highlight.js，我们将创建一个名为highlightjs的自定义Vue.js指令。在main.ts文件中直接声明此指令：
// 代码高亮插件
import hljs from 'highlight.js';
// 必须导入 否则没样式
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官网
选择想要的styles，然后在main.ts的导入样式文件给替换成对应的右侧文件即可
