作为程序员一定要保持良好的睡眠,才能好编程

UEditor百度编辑器使用文档及代码高亮显示

发布时间:2020-03-14



百度编辑器使用文档:


http://fex.baidu.com/ueditor/#start-config




百度编辑器ueditor代码高亮效果前台不显示的解决方法

<link href="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />   

<script type="text/javascript" src="你的ueditor路径/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>  

<script type="text/javascript">      

SyntaxHighlighter.all();       

</script>


shCore.js 和 shCoreDefault.css

 

以上代码注意修改你的你的ueditor路径。

 

修改后,即可实现本文这样的效果...........


百度编辑器(UEditor)结合highlight.js实现代码高亮显示


https://blog.csdn.net/msllws/article/details/81048390




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


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


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


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


(这句话是后加的......网上剽窃我这段js代码不注明出处的,你们的良心不会痛吗?做程序员要有修养滴)


<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>';
    }
</script>

我们还可以给代码块自定义样式,例如:代码块宽度、字体大小、行高、不强制换行等等

<style type="text/css">
#mycode{
font-size: 18px;
width:500px;
white-space: pre; /*不强制换行*/
}
</style>

image.png