Vue中如何实现代码高亮功能？

1、下载依赖

2、在main.js文件中导入包

3、同样是在main.js文件中自定义一个指令

4、在vue文件中使用指令

5、效果展示

1、下载依赖

npm install highlight.js --save

2、在main.js文件中导入包

//导入代码高亮文件
import hljs from 'highlight.js'
//导入代码高亮样式
import 'highlight.js/styles/monokai-sublime.css'

3、同样是在main.js文件中自定义一个指令

//自定义一个代码高亮指令
Vue.directive('highlight',function (el) {let highlight = el.querySelectorAll('pre code');highlight.forEach((block)=>{hljs.highlightBlock(block)})
})

4、在vue文件中使用指令

 <div><div id="content"><div v-html="article.content" v-highlight></div></div></div>

5、效果展示

Vue中如何实现代码高亮功能？相关推荐

使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
vue中可编辑div添加@功能
简介 1.有默认值情况下,光标自动定位到最后 2.按@键,或者@+shift组合键,可添加被@姓名 3.可整体删除@姓名 4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.ht ...
vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...
原生JS实现代码高亮功能
实现步骤分析如何实现该功能了解词法结构 Javascript的产生式少废话,上代码分析如何实现该功能平时我们在使用一些代码编辑器或者Markdown时很好奇它的代码高亮是如何实现的.其实原 ...
vue结合highlightjs实现代码高亮+行号
实现代码高亮+行号设置 1.下载 highlightjs: npm install highlight.js` 2.在main.ts中写 import hljs from 'highlight.js ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue+Element实现搜索关键字高亮功能
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

Vue中如何实现代码高亮功能？

1、下载依赖

2、在main.js文件中导入包

3、同样是在main.js文件中自定义一个指令

4、在vue文件中使用指令

5、效果展示

Vue中如何实现代码高亮功能？相关推荐

最新文章

热门文章