Prism 代码高亮修改不包含 Code 标签的支持
在 WordPress 中加入了百度的 UEditor 编辑器后,由于自带的代码插件在使用时只会在代码外层加入 pre 标签,如图:
但实际 Prism 高亮需要下面这种格式的支持:
<pre class="line-numbers language-csharp"> <code> //高亮代码 </code> </pre>
所以为了能够支持 pre 中没有 code 标签的情况,在文件 Prism.js 中查找 highlightAll 并修改如下代码:
.... highlightAll: function(async, callback) { //var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); //for (var i=0, element; element = elements[i++];) { // _.highlightElement(element, async === true, callback); //} //支持 PRE 标签,修改为 var clsReg = /\s*\blanguage-\b\s*/; var pres = document.querySelectorAll("pre"); for (var i = 0, pre; pre = pres[i++];) { var isCode = false; if ((pre.firstChild && (isCode = (pre.firstChild.tagName === "CODE")) && clsReg.test(pre.firstChild.className)) || clsReg.test(pre.className)) { if (!isCode) pre.innerHTML = "<code>" + pre.innerHTML + "</code>"; _.highlightElement(pre.firstChild, async === true, callback); } } } ....
修改后进行 Js 压缩,然后覆盖原文件,然后在 WordPress UEditor 中插入的代码在前端页面就能高亮显示了。
Prism 高亮官网地址:http://prismjs.com/
Prism GitHub 地址:https://github.com/PrismJS/prism
上一篇:让谷歌浏览器Google Chrome支持eWebEditor的方法
栏 目:网页编辑器
本文标题:Prism 代码高亮修改不包含 Code 标签的支持
本文地址:https://www.xiuzhanwang.com/a1/wangyebianjiqi/11781.html
阅读排行
本栏相关
- 01-11针对PHP环境下Fckeditor编辑器上传图片
- 01-11关于jsp版ueditor1.2.5的部分问题解决(上
- 01-11UEditor编辑器自定义上传图片或文件路
- 01-11UEditor 编辑器跨域上传解决方法
- 01-11免费开源百度编辑器(UEditor)使用方法
- 01-11ckeditor插件开发简单实例
- 01-11使用ZeroClipboard解决跨浏览器复制到剪
- 01-11CKEditor 取消转义的两种方法
- 01-11FCKeditor + SyntaxHighlighter 让代码高亮着
- 01-11为SyntaxHighlighter添加新语言的方法
随机阅读
- 01-11ajax实现页面的局部加载
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 04-02jquery与jsp,用jquery
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10delphi制作wav文件的方法
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10C#中split用法实例总结
- 01-10SublimeText编译C开发环境设置