Vue进阶(幺伍叁):Vue-highlight 实现代码高亮

2,015 阅读1分钟

highlight.js 支持几十种编程语言(点击下载),既包括常见的 Cjavajavascriptrubypythonhtmlcsssql等,还支持 apachenginx 这些配置文件的语法。

除了引入Vue-highlight.js文件外,还需要引入样式文件highlight.jsvue-highlight.js只是实现了代码高亮的功能,安装包里是没有css样式文件的,因此我们还需要安装一个highlight.js来实现真正的样式。

安装

npm install --save vue-highlightjs

引用

在我们的入口文件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的组件指令化,所以使用起来非常简便。

<!-- 1.如果你需要高亮的代码是一个变量值,那么你可以这样使用它。 其中 sourcecode 为变量。 -->
<pre v-highlightjs="sourcecode"><code></code></pre>

<!-- 2.如果你需要高亮的代码固定的源代码,那么你可以这样使用它。 -->
<pre v-highlightjs><code>const s = new Date().toString()</code></pre>

拓展阅读