vue2 highlightjs
时间: 2023-11-04 18:56:53 浏览: 50
在Vue2中使用highlight.js可以通过以下步骤完成:
1. 在项目中安装highlight.js和@highlightjs/vue-plugin插件。使用以下命令安装它们:
```
npm install highlight.js
npm install @highlightjs/vue-plugin@1.0.2
```
2. 在main.js中添加以下代码:
```javascript
import highlightPlugin from "@highlightjs/vue-plugin";
Vue.use(highlightPlugin);
```
3. 在组件中引入highlight.js并使用它。例如,在template中添加highlightjs组件,并通过:code属性传入要高亮显示的代码:
```html
<template>
<div class="gl-view-rootbox">
<highlightjs language="javascript" :code="code"></highlightjs>
</div>
</template>
```
4. 在组件的script中定义code数据,并设置要高亮显示的代码:
```javascript
export default {
data() {
return {
code: `let x = 5; let y=10; let obj={ age:12, name:'lihao' }`,
};
},
};
```
5. 需要注意的是,如果使用@highlightjs/vue-plugin时样式没有生效,可以尝试修改@highlightjs/vue-plugin中的vue.js文件。将原来的导入注释掉,使用新的导入:
```javascript
// import hljs from "highlight.js/lib/core.js";
import hljs from 'highlight.js/lib/common';
```
参考文献:
https://blog.csdn.net/weixin_40532650/article/details/109988630
官网:https://highlightjs.org/