作者:念念念念念子-璃_908 | 来源:互联网 | 2023-07-25 08:07
万能的github真主,让我们强大!在vue的项目中想使用highlight.js这样的代码高亮?有人帮助我们实现了vue-highlightjs安装yarnaddhighlight.js-Dyarnaddvue-highlight.js-D这里解释一下为什么要安装两个依赖:vue-highlight.js只是实现了代码高亮的功能,他的安装包里是没有css的
万能的github
真主,让我们强大!
在vue的项目中想使用highlight.js
这样的代码高亮?有人帮助我们实现了vue-highlightjs
yarn add highlight.js -D
yarn add vue-highlight.js -D
这里解释一下为什么要安装两个依赖:vue-highlight.js
只是实现了代码高亮的功能,他的安装包里是没有css
的样式文件的,因此我们还需要安装一个highlight.js
来实现真正的样式。
在我们的入口文件main.js
中引用依赖
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
我们使用的是atom-one-dark.css
这个样式文件,可以根据
highlight.js官网上的面配色自定义自己的展示效果。也可以看我们项目中安装的highlight.js
中的文件去看是否具备这个样式表。
因为已经实现了vue
的组件化,所以使用起来非常傻瓜...
// demo.vue
{
border: 1px solid #fff;
}
highlight.js demo地址
vue-highlightjs github地址
原文地址:https://segmentfault.com/a/1190000016877782