度编辑器(ueditor)功能丰富,在移动端的适配也做的不错,而且自带了代码块的编辑和高亮显示功能。
打开代码块的编辑和显示功能,有下面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'
]];
配置好菜单后,编辑器工具菜单栏里会显示【代码语言】项的菜单
编辑代码块内容
从html模式可以看到,代码是放在<pre></pre>标签中
前端显示内容时,需要引入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(){
*请认真填写需求信息,我们会在24小时内与您取得联系。