Prism.js实现UEditor输出代码高亮显示的实用教程
转换代码格式：首先，需要处理UEditor发布的代码格式，因为Prism.js仅支持类似<pre><code class="code language-代码语言">代码</code></pre>的格式，而UEditor默认发布的代码格式为<pre class="brush:代码语言;toolbar:false">代码</pre>。因此，需要在前端显示时进行格式转换。这可以通过JavaScript实现，遍历所有带有class属性的<pre>标签，然后根据class属性中的brush:字段提取出语言类型，并将内容转换为Prism.js支持的格式。
应用Prism.js：一旦代码格式被正确转换，就可以应用Prism.js进行高亮显示了。这通常涉及到调用Prism.js的highlightElement方法，对转换后的代码元素进行高亮处理。
显示行号：如果需要显示行号，可以在转换后的<code>标签上添加相应的类名或属性，以支持行号显示功能。
集成到UEditor：最后，将上述转换和处理逻辑集成到UEditor中，确保在发布内容时能够正确应用这些转换规则，从而实现代码的高亮显示。
具体实现时，可以参考以下JavaScript代码片段，它展示了如何遍历并转换UEditor发布的
<pre class="brush:代码语言;toolbar:false">代码</pre>
以上是UEditor输出的
<pre><code class="code language-代码语言">代码</code></pre>
以上是Prism.js所需要的输出的
要想前者输出的代码适用Prism.js 只需要在模板里加上如下JS
<!-- prism 高亮 UEditor -->
<script type="text/javascript">
var $codepre = $("pre[class]");
if($codepre.length>0){
for(var i = 0;i<$codepre.length;i++){
var item = $codepre.eq(i);
var language = "";
item.attr("class").replace(/brush:([^;]+)/,function(a,b){
language = b;
});
if(language){
var codehtml = item.html();
var code = $("<code>");
code.attr("class","code lang-"+language);
code.html(codehtml);
item.html(code);
Prism.highlightElement(code[0]);
}
}
}
</script>
<!-- prism 高亮 UEditor --> 
