您现在的位置是：网站首页> 编程资料编程资料
Prism 代码高亮修改不包含 Code 标签的支持_网页编辑器_
2023-05-25
251人已围观
简介 Prism 代码高亮修改不包含 Code 标签的支持_网页编辑器_
在 WordPress 中加入了百度的 UEditor 编辑器后，由于自带的代码插件在使用时只会在代码外层加入 pre 标签，如图：
但实际 Prism 高亮需要下面这种格式的支持：
//高亮代码
所以为了能够支持 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 = "" + pre.innerHTML + ""; _.highlightElement(pre.firstChild, async === true, callback); } } } ....修改后进行 Js 压缩，然后覆盖原文件，然后在 WordPress UEditor 中插入的代码在前端页面就能高亮显示了。
Prism 高亮官网地址：http://prismjs.com/
Prism GitHub 地址：https://github.com/PrismJS/prism
相关内容
- UEditor 默认字体和字号的修改方法_网页编辑器_
- Ueditor和CKeditor 两款编辑器的使用与配置方法_网页编辑器_
- ckeditor和ueditor那个好 CKEditor和UEditor使用比较_网页编辑器_
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介_网页编辑器_
- 最新版CKEditor的配置方法及插件(Plugin)编写示例_网页编辑器_
- CKEDITOR二次开发之插件开发方法_网页编辑器_
- ckeditor自定义插件使用方法详解_网页编辑器_
- 百度UEditor编辑器使用教程与使用方法(图文)_网页编辑器_
- 让谷歌浏览器Google Chrome支持eWebEditor的方法_网页编辑器_
- ueditor编辑器不能上传图片问题的解决方法_网页编辑器_
