您现在的位置是:网站首页>>其他>>其他

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

发布时间:2018-08-29 11:34:22作者:wangjian浏览量:659点赞量:-1

    一:下载highlight插件

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

    选择好语言进行下载

    image.png

    将下载下来的文件进行解压,解压后目录结构如下:

    image.png


    二:引入highlight并使用

    1:将highlight文件放到你的项目中

    2:引入highlight


    <!-- 引入下面三条 -->
    <script type="text/javascript" src="/highlight/highlight.pack.js"></script>
    <link rel="stylesheet" href="/highlight/styles/tomorrow-night-eighties.css"> <!--这里的css文件可根据喜好选择-->
    <script>hljs.initHighlightingOnLoad();</script>

    三:js设置

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

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


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

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


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

    到此百度编辑器(UEditor)结合highlight.js实现代码高亮显示完成,效果如:

    image.png


    参考来源:https://blog.csdn.net/msllws/article/details/81048390

-1 +1