# 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).