Prism 代码高亮修改不包含 Code 标签的支持
更新时间：2017年03月25日 22:33:37 投稿：mdxy-dxy
在 WordPress 中加入了百度的 UEditor 编辑器后，由于自带的代码插件在使用时只会在代码外层加入 pre 标签，下面给出解决方法,需要的朋友可以参考下
在 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
相关文章
这篇文章主要介绍了一款垃圾中的极品HTML编辑器(兼容IE OR FF)2007-04-04
今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度UEditor编辑器官网上也有简单的教程，不过看着比较费劲，今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法，希望对大家有所帮助2016-11-11
因为ewebeditor编辑器的功能强大，容易扩展等原因，一直是大家比较喜爱的编辑器，所以下面介绍下ewebeditor如何跟php结合。2009-07-07
这篇文章主要介绍了UEditor 默认字体和字号的修改方法,需要的朋友可以参考下2017-03-03
FCKeditor + SyntaxHighlighter 让代码高亮着色插件
FCKeditor是现在最为流行的开源编辑器，SyntaxHighlighter是一个用JS实现的代码高亮显示插件，FCKeditor + SyntaxHighlighter 让代码高亮着色，可以最小化修改您的程序实现效果2014-06-06
这篇文章主要为答案及介绍了Edge浏览器开发者工具代码修改同步到Vscode中，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。下面小编来带大家了解下如何使用2019-05-05
ckeditor 简单配置使用方法2010-01-01
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。2010-01-01
又一个不错的FCKeditor 2.2的安装、修改和调用方法
又一个不错的FCKeditor 2.2的安装、修改和调用方法...2007-11-11
最新评论