百度编辑器(ueditor)功能丰富，在移动端的适配也做的不错，而且自带了代码块的编辑和高亮显示功能 。
打开代码块的编辑和显示功能，有下面3个步骤：
1/3 编辑器的菜单配置【ueditor 百度编辑器的代码块显示功能的设置】注意菜单项的配置是否包括了插入代码的菜单项；
菜单名称：insertcode，菜单项的默认配置文件是 ueditor.config.js
toolbars = [[ 'source','insertcode', 'bold', 'italic', 'underline', 'strikethrough', 'customstyle', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|', 'lineheight', '|','fontfamily', 'fontsize', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','indent' ,'removeformat', '|', 'link', 'insertimage', 'insertvideo', 'attachment', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'spechars']];
2/3 编辑器中插入代码块配置好菜单后，编辑器工具菜单栏里会显示【代码语言】项的菜单
文章插图
编辑代码块内容
文章插图
从html模式可以看到，代码是放在<pre></pre>标签中
3/3 内容显示时代码块的渲染前端显示内容时，需要引入SyntaxHighlighter插件，并调用初始化方法后才会进行渲染
<script type="text/JAVAscript" src=https://www.isolves.com/it/cxkf/bk/2020-09-15/"/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCore.js">渲染效果
文章插图
推荐阅读
- 日均收入从1万跌到30元，百度联盟站长躺着赚钱的时代结束了
- 马周百度百科 唐朝马周的后代
- 怎样用贴吧引流
- EditPlus——一款小巧功能强大的老牌代码文本编辑器
- ?是什么符号 ?是什么意思
- 如何让百度快速收录我们的网站
- 古时候学校 在古代上学的日子百度百科
- 暗藏在QQ邮箱、百度网盘的国密算法到底是如何实现的？
- 百度小程序开发所需要考虑的问题
- 百度竞价实操技巧