Vue2 中使用 highlight 代码高亮插件

阅读 (5067)
已经有现成封装好的插件了,vue中直接调用就行了,官方的highlight.js插件,在vue中需要自己封装,网上有很多教程,但写的都云里雾里,对新手来说,不是很好理解,用下面的插件简单好用

安装

通过npm安装,淘宝镜像用cnpm命令

npm install --save vue-highlightjs

使用 vue-highlightjs

在主入口 文件 (如 main.js):

// 导入 Vue 和 vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
// 告诉Vue 要使用插件 vue-highlightjs
Vue.use(VueHighlightJS)

在 template 模板中加入代码高亮:

<!-- 如果是动态加载内容如变量 'sourcecode' 赋值再渲染,可用以下方式 -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

<!-- 也可以直接写内容在标签中 -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>

 

更新于:2018-08-02 10:20:48
返回顶部