联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
ueditor百度编辑器使用prismjs 插件实现代码高亮
类型:迅睿CMS 更新时间:2024-09-29 11:44:36 百度编辑器 代码高亮

ueditor百度编辑器 使用 prismjs 插件 实现代码高亮

ueditor百度编辑器 官方免费插件

prismjs.com 下载prism即可,下载方法建议百度,这里就不说了,很简单得。

下载的prism.js 和prism.css记得调用




先上效果图

图片


<pre class="brush:js;toolbar:false;"> xxx </pre>

这个代码是百度编辑器自带得一个代码,



<pre><code class="language-css">p { color: red }</code></pre>

而prismjs 需要的是 中间要有个<pre><code class="language- 语言"></code></pre>

注:后台的话尝试过修改编辑器代码 几万条代码看的是眼花缭乱,勉强能实现,重复点击会失效,搞了两个小时就想想前台能不能改


百度查到的相结合可以完美实现,利用的是JS来构造,废话不多说直接上代码

阐述下逻辑:

  1. 首先遍历所有的 <pre> 标签,获取其 class 属性值。

  2. 使用 ; 号来分隔值,放入数组。

  3. 再次获取数组第一个值,再次使用: 分隔,放入数组。数组内第二个值即为 html(代码语种)

  4. 获取 <pre> 标签内容,放入 <code> 包裹起来,再次放入 <pre> 标签。


下面代码使用方式:页面调用下载的prism.js和prism.css,然后把下面的代码复制黏贴到最下面的js即可。

 $(document).ready(function(){    
var doc_pre = $("#post_content pre");
    doc_pre.each(function(){       
        var class_val = $(this).attr('class');        
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');        
    var lan_class = 'language-'+class_arr['1'];       
    var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
        $(this).attr("class",'line-numbers '+lan_class);//这个是行号,不需要可以注释
    });
    Prism.highlightAll();//重新加载prism
    
});



回帖
  • 丛林灰太狼
    #1楼    丛林灰太狼
    2022-10-12 11:20:23
    Edge 0
    哈,看看优秀列子,谢谢
  • 听懂音律
    #2楼    听懂音律
    2022-10-14 17:16:53
    Chrome 0
    哈,看看优秀列子,谢谢
  • 李齐恩
    #3楼    李齐恩
    2022-11-28 15:25:41
    Chrome 0
    正好需要 谢谢楼主
  • Rambo
    #4楼    Rambo
    2022-12-15 09:54:43
    Chrome 0
    看看怎么实现的
  • langes
    #5楼    langes
    2022-12-15 17:27:52
    Edge 0
    看看怎么实现的
  • 松鼠
    #6楼    松鼠
    2022-12-31 14:03:21
    Chrome 0
    学习一下学习一下
  • 小白
    #7楼    小白
    2023-03-07 00:05:23
    Chrome 0
    丛林灰太狼 学习一下学习一下
  • 无
    #8楼    无
    2023-03-08 11:31:03
    Chrome 0
    哈,看看优秀列子,谢谢
  • 听海
    #10楼    听海
    2023-03-17 01:27:23
    Firefox 110.0 0
    看看优秀列子,谢谢
  • 来淘淘
    #11楼    来淘淘
    2023-03-17 22:32:18
    Chrome 0
    哈,看看优秀列子,谢谢
  • 自牧
    #12楼    自牧
    2023-03-17 22:45:58
    Chrome 0
    哈,看看优秀列子,谢谢
  • wang00001
    #13楼    wang00001
    2023-03-21 17:50:48
    Firefox 111.0 0
    哈,看看优秀列子,谢谢
  • user_falle
    #14楼    user_falle
    2023-03-28 17:14:27
    Chrome 0
    哈,看看优秀列子,谢谢
  • 不耻下问小菜新
    #15楼    不耻下问小菜新
    2023-04-04 10:52:52
    Chrome 0
    学习一下学习一下
  • 小飞鸡。
    #16楼    小飞鸡。
    2023-04-04 17:49:54
    Chrome 0
    哈,看看优秀列子,谢谢
  • sk86
    #17楼    sk86
    2023-04-24 07:40:51
    Chrome 0
    学习了看看
  • 405593121
    #18楼    405593121
    2023-05-05 00:25:50
    Chrome 0
    希望能用,谢谢分享
  • 万利汇资
    #19楼    万利汇资
    2023-05-26 10:31:26
    Chrome 0
    正好需要 谢谢楼主
  • kspade2
    #20楼    kspade2
    2023-06-04 22:48:48
    Chrome 0
    有点恶心动不动要回复
  • 远策
    #21楼    远策
    2023-06-05 11:41:06
    Chrome 0
    学习研究以下
  • lolian2
    #22楼    lolian2
    2023-06-14 11:25:22
    Chrome 0
    看看~~~~学习一下~
  • 张先生
    #23楼    张先生
    2023-07-12 16:58:03
    Chrome 0
    正需要这玩意
  • 和
    #24楼    和
    2023-07-13 21:35:01
    Edge 0
    好东西,值的学习、收藏
  • 飞翔
    #25楼    飞翔
    2023-07-17 11:41:40
    Chrome 0
    学习一下学习一下
  • KOK
    #26楼    KOK
    2023-08-28 18:48:52
    Edge 0
    看看例子。。。。。。。学习下
  • 吃不痴
    #27楼    吃不痴
    2023-08-28 21:13:38
    Chrome 0
    学习一下看看怎么实现的。。。。。。
  • 未别离
    #28楼    未别离
    2023-08-29 14:49:04
    Chrome 0
    回复学习一下 看看代码
  • yiuyiyu
    #29楼    yiuyiyu
    2023-10-12 16:09:44
    Chrome 0
    学习一下看看怎么实现的。。。。。。
  • 慧科云
    #30楼    慧科云
    2023-11-07 22:16:33
    Edge 0
    学习一下学习一下
  • 麦尖
    #31楼    麦尖
    2023-11-14 11:18:41
    Chrome 0
    哈,看看优秀列子,谢谢
  • cc76
    #32楼    cc76
    2023-12-16 15:36:37
    Chrome 0
    丛林灰太狼
  • 小哈哈
    #33楼    小哈哈
    2023-12-17 23:14:00
    Chrome 0
    看看怎么实现的
  • 葛哥
    #34楼    葛哥
    2023-12-18 09:41:41
    Chrome 0
    看看优秀列子,谢谢
  • 迅睿粉丝
    #35楼    迅睿粉丝
    2023-12-18 13:05:26
    Chrome 0
    看看,学习一下
  • 王抑云
    #36楼    王抑云
    2023-12-21 15:55:53
    Chrome 0
    学习一下,看看怎么实现的
  • 王抑云
    #37楼    王抑云
    2023-12-24 21:30:14
    Chrome 0
    怎么实现代码过长自动换行
  • 学习一下
    #38楼    学习一下
    2023-12-29 17:50:42
    Chrome 0
    先上效果图
  • 从允
    #39楼    从允
    2024-01-03 13:04:29
    Chrome 0
    先上效果图先上效果图
  • 木木建站
    #40楼    木木建站
    2024-01-03 15:00:57
    Chrome 0
    学习一下学习一下
  • 风信子
    #41楼    风信子
    2024-01-18 22:48:00
    Chrome 0
    学习一下,看看楼主怎么弄的
  • 风信子
    #42楼    风信子
    2024-01-20 01:01:00
    Chrome 0
    后台高亮的话,怎么弄啊?
  • 打不死的小强
    #43楼    打不死的小强
    2024-02-16 17:01:29
    Chrome 0
    看下看下看下
  • 学无止境
    #44楼    学无止境
    2024-02-16 17:21:00
    Chrome 0
    来学习,新年快乐
  • 学无止境
    #45楼    学无止境
    2024-03-20 20:46:30
    Chrome 0
    😞 官网编辑器有插入代码功能,为啥xunruicms系统自带编辑器要yan割插入代码功能。yan割就yan 割吧,还没有一款代码高亮插件可用 😁 😁 😁 😁
  • 岩坨
    #46楼    岩坨
    2024-03-31 23:23:35
    Chrome 0
    看下看下看下
  • 学习狂人
    #47楼    学习狂人
    2024-04-10 21:34:57
    Chrome 0
    哈,看看优秀列子,谢谢
  • 因果性
    #48楼    因果性
    2024-05-22 09:42:36
    Edge 0
    看看优秀列子,谢谢
  • wang0909
    #49楼    wang0909
    2024-06-08 02:21:41
    Chrome 0
    看看学习下
  • cdkklwl19115644913
    #50楼    cdkklwl19115644913
    2024-06-12 10:46:35
    Edge 0
    学习学习怎么用
  • nemovip
    #51楼    nemovip
    2024-06-22 05:36:53
    Chrome 0
    哈,看看优秀列子,谢谢
  • 团队发发发
    #52楼    团队发发发
    2024-09-06 18:57:00
    Edge 0
    看看优秀列子,谢谢
  • 首席执行官
    #53楼    首席执行官
    2024-09-29 11:44:36
    Chrome 0
    正好我也是使用这个自动代码高亮,同样的问题。