Prism 代码高亮修改不包含 Code 标签的支持（prism添加数据标签）深度揭秘

文章摘要

本文介绍了一种用于代码高亮的JavaScript函数highlightAll。该函数通过异步方式处理HTML元素，特别针对带有特定class名的代码块进行处理。代码通过使用正则表达式匹配pre标签中的代码块，并将其包裹在<code>标签内。随后，函数调用highlightElement函数对这些代码块进行高亮显示，以突出显示代码内容。该方法支持异步运行，并且在处理过程中保持了较高的效率。

….

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);
}
}
}

….