本文介绍了如何在VUE项目中结合ueditor和highlight.js，实现在富文本编辑器中生成的文章代码自动高亮。通过放弃ueditor自带的高亮功能，采用highlight.js，不仅提高了代码的可读性，还能定制符合个人审美的样式。详细步骤包括安装highlight.js，配置ueditor，以及在前端展示页面引入相应样式。
环境
VUE，NPM
需求
在ueditor编辑器里面加入代码语言后，页面生成的文章自动高亮起来。
目的
增加文章的可读性，以及让页面变得丰富多彩。
选择
我这里放弃了百度ueditor自带的高亮，因为确实不太好看，不符合我的审美，于是我这里用到的是highlight.js，这是一个提供自动识别代码块的高亮插件，并且它的库很多风格，可以根据自己的喜爱来配置。
准备
ueditor编辑器
配置
首先我们在自己的后台安装highlight,js.插件
npm install highlight.js --save
安装好后在需要使用高亮的页面，也就是ueditor编辑器页面中，先引入代码
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'<
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
