如何在vue中实现代码高亮-使用highlight.js

2024-09-26

安装highlight.js

首先，使用 npm 安装 highlight.js：

npm install highlight.js @highlightjs/vue-plugin

引入highlight.js

在 main.js 中引入 highlight.js：

import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";


app.use(hljsVuePlugin)
app.mount('#app')   //最后挂载应用，顺序不能倒过来。

使用highlight.js

在需要高亮的地方使用 <Highlight> 组件：

<template>
    <highlightjs language="js" code="console.log('Hello World');"
    />
</template>

参考

github地址

highlightjs-vue操作指引

highlight.js官网