【vue】 vue引入highlight.js高亮显示代码


【vue】 vue引入highlight.js高亮显示代码

1.安装

npm install --save vue-highlightjs
npm install --save highlight.js

这里解释一下为什么要安装两个依赖:vue-highlight.js只是实现了代码高亮的功能,他的安装包里是没有css的样式文件的,因此我们还需要安装一个highlight.js来实现真正的样式。
2.引入

在我们的入口文件main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

3.使用


1
class内的lua为对应要设置高亮的脚本语言
例: javascript

如遇版本问题会提示:npm install --save highlight.js/lib/highlight highlight.js/styles/github-gist.css

对比json文件的版本和依赖版本是否一致,不一致安装为依赖的版本

安装后会发现两个版本一样了


————————————————
版权声明:本文为CSDN博主「WANGHUAN-」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39583930/article/details/90518840

vue