vue中使用highlight.js 高亮代码块

项目环境

近期在做旧项目的重构，在搭建新项目的时候使用了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的导入样式文件给替换成对应的右侧文件即可