整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

百度编辑器(ueditor)的代码块显示功能的设置

度编辑器(ueditor)功能丰富,在移动端的适配也做的不错,而且自带了代码块的编辑和高亮显示功能。

打开代码块的编辑和显示功能,有下面3个步骤:

1/3 编辑器的菜单配置

注意菜单项的配置是否包括了插入代码的菜单项;

菜单名称: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="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCoreDefault.css"/>

<script type="text/javascript">
    $(document).ready(function () {
        SyntaxHighlighter.all();
    });
</script>

渲染效果

浏览器中,一个比较常见的高亮文本场景是,用户按下快捷键ctr+f,对文本内容进行搜索。在页面里,相应的文本就会高亮。这种高亮,是浏览器实现的。

如果我们要实现这种高亮效果,现有的CSS实现起来是相对比较麻烦的。

方案一,使用伪元素::selection

当我们在页面中,选中一段文本的时候,可以通过document.getSelection()获取到文本选中的节点信息。相应的,我们可以通过Range Api去主动设置选中文本范围。再通过设置::selection样式,实现选中文本高亮效果。这种方案,实现起来比较麻烦,我们需要精确计算每一个高亮预期的选中起止位置。

方案二,对于在页面中需要高亮的文本,进行单独处理

对于静态呈现的内容,在开发中,一般通过设置固定的标签和样式实现文本高亮。

对于需要动态变化的内容处理,例如codemirror,会有一套独立的dom结构树,通过dom结构树,根据处理后的dom结构,在页面中呈现出高亮。这种方案,就相当复杂了。

方案三, 使用伪元素::highlight

这个方案的实现方式,与::selection类似。通过Range Api 设置选中区域。再将这些区域配置进需要高亮的Hight中,最后通过设置::highlight样式实现高亮。

这种方案,比::selection方案具有更强的可操作性。这是新的api,各个浏览器没有完全实现。

【参考资料】

[1] CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web. https://css-tricks.com/css-custom-highlight-api-early-loo/

avaScript奇淫技巧:命令行语法高亮

本文,将实现命令行输出带有语法高亮、带行号的JS代码。

效果如下图所示:

对于JS程序员而言,这个效果是有些惊喜的。

而实现起来,却似乎是出乎意料的简单。

直接上源码:

var js_code = `

function get_copyright(){