# vue-highlight.js

**Repository Path**: qc-cool/vue-highlight.js

## Basic Information

- **Project Name**: vue-highlight.js
- **Description**: 封装了一个基于vue.js 3.0的代码高亮显示指令
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-10-08
- **Last Updated**: 2021-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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