} "> 登录
当前位置: 首页 博客系统

编辑器增加代码高亮功能

日期:2018-08-18 00:07  点击量:3701

代码高亮功能说明

步骤一、summernote拓展插件,支持代码插入,summernote整合以下插件,
https://github.com/heyanlong/summernote-ext-highlight

    在tools目录编辑以下文件

node_modules/summernote/dist/summernote.js
  1. 文件的 7102 行 后 增加 prettifyHtml: false,
  2. 文件的 7108 行 后 增加 ['highlight', ['highlight']], 
步骤二、下载以下插件,放在plugins目录下
https://github.com/google/code-prettify


步骤三、构造器引入加载文件

    在editor构造器结尾,引入prettify加载文件

{cdnjs href="__NEWSTATIC__/plugins/code-prettify/loader/run_prettify.js?skin=sunburst" /}

步骤四、页面中引入prettify加载文件

    在需要显示代码的模板结尾添加

{cdnjs href="__NEWSTATIC__/plugins/code-prettify/loader/run_prettify.js?skin=sunburst" /}


步骤五、显示所有行号

    在全局css文件内,添加以下内容,显示所有行号,默认隔5行显示一次行号

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important;
}


步骤六、待完善细节
  • 初始添加代码时,代码字体颜色看不清楚,保存后再次编辑时颜色正常
  • 添加代码点击复制功能
"小礼物走一走,感谢支持"
赞赏支持
/作者: 超级管理员    /标签: -
举报

相关文章

对项目进行子模块gitsubmodule目录进行重构

对项目进行子模块gitsubmodule目录进行重构......

/作者: 超级管理员/标签: - /点击量: 583 /评论量: 0 /添加时间: 1538214859
gitlab安装后的时区修复

gitlab安装后,时区修复......

/作者: 超级管理员/标签: - /点击量: 585 /评论量: 0 /添加时间: 1538179143
gitlab使用webhook自动部署

gitlab使用webhook自动部署......

/作者: 超级管理员/标签: - /点击量: 841 /评论量: 0 /添加时间: 1537946217
蜗壳系统使用教程

蜗壳系统使用教程......

/作者: 超级管理员/标签: - /点击量: 4827 /评论量: 0 /添加时间: 1537850367