安装

依次安装如下两个依赖，缺一不可。

npm install --save highlight.js
npm install --save @highlightjs/vue-plugin

修改main.js

在main.js中全局引入相关依赖项。

/*黑色主题*/
import 'highlight.js/styles/atom-one-dark.css';
/*白色主题*/
// import 'highlight.js/styles/stackoverflow-light.css';
import hljs from 'highlight.js/lib/core';
// import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from "@highlightjs/vue-plugin";
// 批量引入常用语言库
import 'highlight.js/lib/common';

const app = createApp(App)

// 注意Vue2的directive是挂在Vue上的，Vue3中无法直接引入Vue但可以挂在app上
app.directive('highlight', function (el) {
    let highlight = el.querySelectorAll('pre code');
    highlight.forEach((block) => {
        // Deprecated as of 10.7.0. highlightBlock will be removed entirely in v12.0
        // Deprecated as of 10.7.0. Please use highlightElement now.
        hljs.highlightElement(block);
    })
});

app.use(hljsVuePlugin)
app.mount('#app')

要注意有的老文章中遍历时可能使用的是highlightBlock，该方法已被弃用并应该及时替换为highlightElement。

在模板中使用

在标签中加上v-highlight属性即可。注意被当作代码的文本应当被标签<pre><code>{{ value }}</code></pre>包裹。如果希望使用其他的标签，请在上节中的querySelectotAll参数中指定。

<pre v-highlight><code>{{ value }}</code></pre>

<article v-highlight v-html="article.content"></article>