分享

百度编辑器UEditor使用highlightjs高亮显示代码

发布于:2020-04-12 20:24    阅读次数:62    作者:云码素材    分类:建站教程    关键词:ueditor  highlight  

云码素材网站代码高亮显示一直没有做,今天有时间升级了一下,分享给大家方法,网站后台使用的百度编辑器ueditior,这里我使用highlight.js显示代码的高亮。具体的方法如下:


一.下载highlight.js


https://highlightjs.org/download/


二.把highlight.pack.js,和style文件夹放置到网站目录里


三.引入需要的js文件和你需要的高亮显示代码的样式


代码如下:

<link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/highlight/styles/tomorrow-night-eighties.css">
<script type="text/javascript" src="__TMPL__/public/assets/highlight/highlight.pack.js"></script>

四.加载Js脚本

<script>hljs.initHighlightingOnLoad();</script>

五.增加js代码和样式

代码高亮遵循的格式是:<pre><code>你的代码</code></pre>,而百度编辑器默认的代码块显示格式为:<pre>你的代码</pre>(来自csdn博客 李维山)

<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:750px;
    		white-space: pre; /*不强制换行*/
    		margin:0 auto;
		}
</style>

注意:以上两段代码不要写在head里,经测试当写在head里不起作用,最好写在文件的底部。


六.运行效果如下:

highlightjs.jpg


推荐源码
查看更多

免费领
签到客服赚钱 反馈 回顶部