Vue中怎么使用Highlight.js,有没有样例
时间: 2024-04-16 11:26:35 浏览: 114
在Vue中使用Highlight.js可以通过以下步骤实现:
1. 安装Highlight.js库你可以使用npm或者yarn来装Highlight.js库。在命令行中运行以下命令:
```
npm install highlight.js
```
2. 在Vue组件中引入Highlight.js:
```javascript
import hljs from 'highlight.js';
export default {
// ...
};
```
3. 创建一个自定义指令来应用代码高亮样式:
```javascript
import hljs from 'highlight.js';
export default {
directives: {
highlight: {
mounted(el) {
hljs.highlightBlock(el);
},
updated(el) {
hljs.highlightBlock(el);
}
}
}
};
```
4. 在模板中使用自定义指令来高亮代码:
```html
<template>
<pre>
<code v-highlight>
// 这里是你的代码
</code>
</pre>
</template>
```
这样就可以在Vue中使用Highlight.js进行代码高亮了。注意要将代码放在 `<pre>` 和 `<code>` 标签中,并将自定义指令 `v-highlight` 应用在 `<code>` 标签上。
希望以上信息对你有所帮助!
阅读全文