所有分类
  • 所有分类
  • 织梦模板

百度编辑器UEditor借助Prism.js实现文章代码高亮显示实用教程

需要把百度编辑器UEditor发布的代码高亮显示,想用Prism.js,但是Prism.js仅支持类似。

  1. <pre><code class=“code language-代码语言”>代码</code></pre>

这种格式,而百度编辑器UEditor默认发布的代码则是:

  1. <pre class=“brush:代码语言;toolbar:false”>代码</pre>

最好的办法就是前端显示的时候给转换一下,找了好多,都不理想,好歹从某一篇文章中提取出来一点可用的,特意写一下,以后备用!

  1. <script>
  2.     var $codepre = $(“pre[class]”);
  3.         if($codepre.length>0){
  4.             for(var i = 0;i<$codepre.length;i++){
  5.                 var item = $codepre.eq(i);
  6.                 var language = “”;
  7.                 item.attr(“class”).replace(/brush:([^;]+)/,function(a,b){
  8.                 language = b;
  9.             });
  10.             if(language){
  11.                 var codehtml = item.html();
  12.                 var code = $(“<code>”);
  13.                 code.attr(“class”,“code lang-“+language);
  14.                 code.html(codehtml);
  15.                 item.html(code);
  16.                 Prism.highlightElement(code[0]);
  17.             }
  18.         }
  19.     }
  20. </script>

如果用了显示行数的插件,可以用:

  1. <script type=“text/javascript”>
  2.     (function(){
  3.         var pres = document.querySelectorAll(‘pre’);
  4.         var lineNumberClassName = ‘line-numbers’;
  5.         pres.forEach(function (item, index) {
  6.             item.className = item.className ==  ? lineNumberClassName : item.className + ‘ ‘ + lineNumberClassName;
  7.         });
  8.     })();
  9. </script>

最终样式:

百度编辑器UEditor借助Prism.js实现文章代码高亮显示实用教程

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5.如有侵权请联系客服邮件770973008@qq.com
原文链接:https://www.56admin.com/25362.html,转载请注明出处。

0
分享海报

评论0

请先

八年老站,质量有保证,90%亲自测试!原价199模板币终生SVIP,优惠68模板币!专属优惠码:56admin  更优惠 数量有限!
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录