时间:2021-05-26
在 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
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
需求:1.可输入代码,并且代码语法高亮2.支持编辑和不可编辑模式3.提交到后端到代码内容为字符串格式实现在gitbug上找到vue-prism-editor,可
复制代码代码如下:JS关键词高亮/**参数说明:*obj:对象,要进行高亮显示的html标签节点.*hlWords:字符串,要进行高亮的关键词词,使用竖杠(|)
1、防止不支持js的浏览器出问题可以这样处理JS代码2、JS放置位置:header:确保脚本被调用时已经加载body:页面载入时就调用外部js文件:不包含标签用
高亮标签*tag-highlight*如果你想高亮文件里的所有标签,可以使用如下映射。--生成tags.vim文件,并高亮标签。--只根据已有的tags.vim
为了实现代码高亮,之前找了很多插件,但是效果都不是很理想。经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点:代码简洁,用标签实现代码高亮,不会生成太