Vue之代码高亮组件

最新推荐文章于 2024-04-28 10:47:28 发布

命运由我不由天

最新推荐文章于 2024-04-28 10:47:28 发布

阅读量1.1k

点赞数

分类专栏：前端 # Vue 文章标签：代码高亮 vue hightlight

本文链接：https://blog.csdn.net/qq_42540089/article/details/103151731

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

一、需求：
       类似于代码展示的功能实现的时候，直接以文本的方式展示代码未免显得太枯燥。实现代码高亮是值得一试的。
二、实现
       思路：使用vue-highlight.js。vue-highlight已经集成到vue了，直接安装就可以。
步骤：
       1、安装

npm install --save vue-highlightjs

2、导入

// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'

// Tell Vue.js to use vue-highlightjs
Vue.use(VueHighlightJS)

3、使用

<!-- If your source-code lives in a variable called 'sourcecode' -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

<!-- If you want to highlight hardcoded source-code -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>