您的位置:首页 > 文章 > 技术文章 > Prism.js实现UEditor输出代码高亮显示的实用教程
Prism.js实现UEditor输出代码高亮显示的实用教程
发布时间:2025-09-26来源:LeafCMS浏览次数:128 次

<pre class="brush:代码语言;toolbar:false">代码</pre> 以上是UEditor输出的 <pre><code class="code language-代码语言">代码</code></pre> 以上是Prism.js所需要的输出的 要想前者输出的代码适用Prism.js 只需要在模板里加上如下JS <!-- prism 高亮 UEditor --> <script typ
<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 -->
点击这里复制本文地址 以上内容由LeafCMS整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!