Content

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

文章摘要

这篇文章介绍了如何在HTML中突出显示不同语言的代码块。通过使用`querySelector`和`highlightElement`函数,可以在`pre`标签内以及带有`language-*`类的代码片段之间实现自动突出显示。文章还提到,通过正则表达式匹配代码块,并对发现的代码进行格式化处理,以确保突出显示的效果。此外,支持使用预定义的`CODE`类来识别代码片段。

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