layui中富文本编辑器添加代码高亮以及文章展示中代码高亮的展示

layui富文本编辑器地址：https://www.layui.com/doc/modules/layedit.html#tool

使用版本：最新----v2.6.8

1、富文本显示代码区并编辑

原本的文档中没有关于代码显示的功能。

 如果想要显示这类场景

需要在工具条新增字段 

code

即这样：

tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线
                , 'code' //代码区域
                , '|' //分割线
                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'unlink' //清除链接
                // ,'face' //表情
                , 'image' //插入图片
                , 'help' //帮助
            ]

然后运行时即可看到该字段：并使用。

2、在文章展示中对代码区域进行展示

1、首先，点击代码后会生成格式文字：

 这样的源代码默认样式为:

<pre lay-lang="javascript" lay-encode="true" class="layui-code">123123</pre>

在layui的代码高亮文档中也是如此：https://www.layui.com/doc/modules/code.html

所以在前台展示页面中需要添加一个code的解码方式。

我是使用最简单的方式：

 layui.code({
            elem: 'pre', //默认值为.layui-code  正文用pre进行保存
            title:'代码展示'
        });

这样是会对富文本中 <pre>进行解析；然后生成代码高亮区域。（具体配置方式参考layui：https://www.layui.com/doc/modules/code.html）

最终的展示效果即为：

 目前已满足我的要求。

以上