代码高亮

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

highlight js官网: https://highlightjs.org

安装 highlight

npm 方式

npm install highlight.js -S

CDN 引入

<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

挂载 highlight

1.获取highlight实例

import hljs from 'highlight.js'

(cdn引入,highlight 实例 "hljs"会声明到window下, 直接调用即可)

挂载设置代码如下

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

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

editor.create()

2.css的引入

npm方式

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

CDN引入

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">

完成以上所有步骤之后, 再次使用wangEditor中的 插入代码 功能, 就能够有高亮效果了, 如图所示

显示内容

当您在读取文本数据作展示时, 展示页面需要引入highlight插件的样式

(安装方式与富文本页面引入highlight相同,不再赘述)

更多highlight使用方法, 请参考highlight.js官方手册

插入代码的配置项

1.languageType

languageType字段为插入代码时, select框的选项值, 我们以为您默认填写了大部分语言类型, 如您还有更多需求,可以对此字段的数组进行修改.

//插入代码语言配置
editor.config.languageType = [
    'Bash',
    'C',
    'C#',
    'C++',
    'CSS',
    'Java',
    'JavaScript',
    'JSON',
    'TypeScript',
    'Plain text',
    'Html',
    'XML',
    'SQL',
    'Go',
    'Kotlin',
    'Lua',
    'Markdown',
    'PHP',
    'Python',
    'Shell Session',
    'Ruby',
]

2.languageTab

插入代码后,您可以在灰色的代码框内对代码文本进行修改. 由于各浏览器环境的不同, 我们对tab键行为进行统一处理, 您可以通过修改languageTab字段对按下tab "键入的字符" 进行修改, 默认为四个全角空格.

editor.config.languageTab = '    '

(languageTab字段决定pre内的tab行为)