vue2中怎么使用vue-highlightjs-line-numbers插件
时间: 2023-02-12 09:54:04 浏览: 438
使用vue-highlightjs-line-numbers插件需要以下几步:
1. 安装插件:在项目中使用npm或yarn安装vue-highlightjs-line-numbers。
```
npm install vue-highlightjs-line-numbers
```
2. 引入插件:在main.js中引入插件并使用Vue.use()方法进行全局注册。
```
import VueHighlightjsLineNumbers from 'vue-highlightjs-line-numbers'
Vue.use(VueHighlightjsLineNumbers)
```
3. 使用插件:在需要使用高亮显示行号的组件中使用v-highlightjs-line-numbers指令。
```
<template>
<div>
<pre v-highlightjs-line-numbers>{{ code }}</pre>
</div>
</template>
<script>
export default {
data () {
return {
code: 'console.log("Hello, world!")'
}
}
}
</script>
```
4.样式,需要手动引入highlight.js的样式文件。
```
<link rel="stylesheet" href="path/to/highlight.js/styles/default.css">
```
完成以上步骤后,高亮显示行号的功能就可以在组件中正常使用了。