摘要：
全能的上帝，让我们坚强起来！是否要使用高亮显示等代码。js在vue项目中的应用？有人帮我们安装了vue-highlightjs，yarnaddhighlight。js Dyarnaddvue highlight.js-D。这就是为什么我们需要安装两个依赖项：vue-highlight。js Dyarnaddvue高亮显示。js-DJs只实现代码高亮显示功能。它的安装包中没有css样式文件，因此我们需要安装一个突出显示。js来实现真正的风格。该引用依赖于importVueHighlightJSfrom'vue-highlightjs'import'highlight.js/styles/atom one dark.cs'vue。我们使用原子一暗。css样式文件，可以根据高亮使用。js官网上的面部颜色匹配可以自定义显示效果。您还可以检查高亮显示的文件。js，以查看样式表是否可用。
万能的github真主，让我们强大！
在vue的项目中想使用highlight.js这样的代码高亮？有人帮助我们实现了vue-highlightjs
- 安装
yarn add highlight.js -Dyarn 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地址原文地址：https://segmentfault.com/a/1190000016877782
vue-highlightjs github地址