vue3-hljs
Version:
基于vue.js 3.0的语法高亮组件
35 lines (27 loc) • 627 B
Markdown
# vue-highlight 基于vue.js 3.x封装的指令
### 引入npm包
```
npm i vue3-hljs
```
### 在main.js中use当前的指令和导入highlight.js的主题
``` javascript
import hljs from "vue3-hljs"
import "highlight.js/styles/dark.css"
createApp(App).use(hljs).mount('#app')
```
### 在html代码上使用v-hljs
``` html
<pre>
<code v-hljs class="javascript">
export default {
name: "App",
components: {
HelloWorld,
},
};
</code>
</pre>
```
然后运行。就可以看到pre->code标签下的代码已经被渲染成高亮格式了
npm地址 [vue3-hljs](https://www.npmjs.com/package/vue3-hljs).