您的位置:首页 > 建站知识 > JS > Prism.js实现UEditor输出代码高亮显示的实用教程
Prism.js实现UEditor输出代码高亮显示的实用教程
2023-03-26来源:建站素材网 别来无恙 329  ]

<pre class="brush:代码语言;toolbar:false">代码</pre>以上是UEditor输出的<pre><code class="code language-代码语言">代码</code></pre>以上是Prism.js所需要的输出的要想前者输出的代码适用Prism.js只需要在模板里加上如下JS<!-- pri
<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 -->
评论列表
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    薪火千叶 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管
    网页秒变灰色方法
发表评论