博主
258
258
258
258
专辑
- gradle专辑 1
- javaweb专辑 2
- 学习笔记zg4 33
- hutool工具包的使用 13
- Vue3+Element Plus 12
- 跟着禹神学Vue3 1
- 学习笔记zg2（SpringBoot版） 10
- 学习笔记zg2-马 0
- LayUI专辑 14
- 学习笔记zg1 9
第二十四节 vue中使用highlight.js实现代码高亮
亮子
2021-07-08 08:07:03
16358
0
0
0
1、第一步：安装依赖:
npm install highlight.js --save 或 yarn add highlight.js
2、第二步：在main.js中引入，官方为我们提供了vue到插件
import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css' //这里有多个样式，自己可以根据需要切换
Vue.use(hljs.vuePlugin);
3、第三：在组件中使用
<div id="app">
<!-- 可以使用自动检测 -->
<highlightjs autodetect :code="function test(){}" />
<!-- 也可以指定语言 -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
4、第四步: highlightjs 扩展(自定义插件)
可以参考:https://www.cnblogs.com/Jimc/p/13161836.html
以上文档已经过时了，请参考下面文档：
https://github.com/metachris/vue-highlightjshttps://github.com/highlightjs/vue-plugin