脚本宝典收集整理的这篇文章主要介绍了

vue-highlightjs的使用小结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

万能的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 <template> <pre v-highlightjs>     <code class="css">         {           border: 1px solid #fff;         }     </code> </pre> </template>
  • 参考

highlight.js demo地址
vue-highlightjs github地址

总结

以上是脚本宝典为你收集整理的

vue-highlightjs的使用小结

全部内容,希望文章能够帮你解决

vue-highlightjs的使用小结

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过