Vue2 中使用 highlight 代码高亮插件

最新推荐文章于 2024-09-10 09:55:02 发布

joyour

最新推荐文章于 2024-09-10 09:55:02 发布

阅读量3.8k

点赞数 1

分类专栏： js vue 文章标签： vue highlightjs

js 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

安装

通过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>