修改关于百度ue高亮代码问题

小白 2019-09-28 原创文章



由于ue自带的高亮,有很多问题,以及样式问题,这里推荐修改如下:

我想要的是类似csdn这种黑色背景的代码高亮显示,经过各种查找比较,最终使用了highlight.js这个插件来实现效果

首先到官网去下载这个插件:https://highlightjs.org/download/

选择好语言 Download下载,下载好后引入:

<!-- 引入下面三条 -->
<link rel="stylesheet" type="text/css" href="./styles/tomorrow-night-eighties.css">
<script type="text/javascript" src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

这里使代码高亮遵循的格式是:<pre><code>你的代码</code></pre>

而百度编辑器默认的代码块显示格式为:<pre>你的代码</pre>

所以我试图在ueditor.all.js里面给pre标签嵌套code标签,结果没什么卵用

于是下面这段js代码诞生了,循环往pre标签里添加code标签

<script type="text/javascript">
    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
    }


效果如下:

QQ截图20190928144124.png


版权声明:本文为CSDN博主「李维山」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/msllws/article/details/81048390

站点信息