vue-highlightjs的使用小结

时间 2019-12-04

标签 vue highlightjs 使用小结繁體版

原文原文链接

万能的 github真主，让咱们强大！
在vue的项目中想使用 highlight.js这样的代码高亮？有人帮助咱们实现了 vue-highlightjs

安装

yarn add highlight.js -D
yarn add vue-highlight.js -Dcss

这里解释一下为何要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的安装包里是没有css的样式文件的，所以咱们还须要安装一个highlight.js来实现真正的样式。vue

引用

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

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

咱们使用的是atom-one-dark.css这个样式文件，能够根据
highlight.js官网上的面配色自定义本身的展现效果。也能够看咱们项目中安装的highlight.js中的文件去看是否具有这个样式表。组件化

使用

由于已经实现了vue的组件化，因此使用起来很是傻瓜...atom

// demo.vue
<template>
<pre v-highlightjs>
    <code class="css">
        {
          border: 1px solid #fff;
        }
    </code>
</pre>
</template>

参考

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