代码高亮

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

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

安装 highlight

npm 方式

  1. npm install highlight.js -S

CDN 引入

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

挂载 highlight

1.获取highlight实例

  1. import hljs from 'highlight.js'

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

挂载设置代码如下

  1. const E = window.wangEditor
  2. const editor = new E('#div1')
  4. // 挂载highlight插件
  5. editor.highlight = hljs
  7. editor.create()

2.css的引入

npm方式

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

CDN引入

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

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

highlight-example

显示内容

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

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

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

插入代码的配置项

1.languageType

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

  1. //插入代码语言配置
  2. editor.config.languageType = [
  3.     'Bash',
  4.     'C',
  5.     'C#',
  6.     'C++',
  7.     'CSS',
  8.     'Java',
  9.     'JavaScript',
  10.     'JSON',
  11.     'TypeScript',
  12.     'Plain text',
  13.     'Html',
  14.     'XML',
  15.     'SQL',
  16.     'Go',
  17.     'Kotlin',
  18.     'Lua',
  19.     'Markdown',
  20.     'PHP',
  21.     'Python',
  22.     'Shell Session',
  23.     'Ruby',
  24. ]

2.languageTab

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

  1. editor.config.languageTab = '    '

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

code-tab-point-example