如何给网站的富文本编辑器添加代码高亮功能

作者: 图恩分类: 开发笔记阅读: 1042字数: 1049发布时间： 2021-11-07 10:12:47

大家好，我是wilkwo，今天给大家介绍下wangEditor如何添加代码高亮功能。

目前网站使用的是wangEditor富文本编辑器，建站前就研究了好几种富文本编辑器，包括tinymce等，要不就是更vue集成比较麻烦，要不就是不好看，最终觉得wangEditor都能满足这个要求。

之前没注意有高亮功能，所以之前的文章内有添加代码的内容就是一个灰色的背景跟黑色的文字，效果不太好。

打算优化一下，看到官网有代码高亮功能，就打算引入这个功能，大家也可以去官网（https://www.wangeditor.com/）了解。

wangEditor中的"插入代码"菜单模块, 支持通过引入 highlight js 插件实现代码高亮的样式功能.并且提供多种样式支持. 编辑器默认不带有 highlight, 需要手动安装高亮插件

引入步骤包括四步:

1、安装highlightjs

npm install highlight.js -S

2、引入highlightjs的css文件

import 'highlight.js/styles/monokai-sublime.css'

3、引入highlightjs文件

import hljs from 'highlight.js'

4、初始化highlightjs，hljs即为上面步骤引入highlightjs的变量

const E = window.wangEditor
const editor = new E('#div1')

// 挂载highlight插件
editor.highlight = hljs

editor.create()

当然也可以通过css文件引入，笔者使用Npm引入方式，毕竟已经安装这个依赖包了。

按照上面步骤操作的话不出意外就能看到效果了。

当然其实引入之后还只能看到代码块会有颜色，本身这个区块是使用pre跟code来标签来显示的。

所以如果你有要求的话还可以优化下这个区块的样式，以下就是笔者优化的样式代码，加了一个黑色背景，文字为白色，加了一个border-radius。

/* 修改富文本编辑器添加代码后样式 */
pre{
  border-radius: 5px;
  padding: 10px;
  color: rgb(231, 227, 227);
  background-color: #2d2d2d!important;
}