vue使用highlight.js

1. 安装highlight.js

npm install highlight.js

2. 在Vue中使用highlight.js

- 方法一：全局注册

在main.js中引入highlight.js：

import Vue from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'; // 引入highlight.js样式

Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

在组件中使用：

<template>
  <div v-highlight>
    <pre><code class="html">HTML代码</code></pre>
    <pre><code class="javascript">JavaScript代码</code></pre>
  </div>
</template>

- 方法二：局部注册

在组件中引入highlight.js：

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'; // 引入highlight.js样式

export default {
  directives: {
    highlight: {
      inserted: function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
          hljs.highlightBlock(block)
        })
      }
    }
  }
}

在组件中使用：

<template>
  <div v-highlight>
    <pre><code class="html">HTML代码</code></pre>
    <pre><code class="javascript">JavaScript代码</code></pre>
  </div>
</template>