百度编辑器UEditor代码高亮以及换行问题


在使用百度编辑器UEditor时,发现代码没有高亮,如图:

image.png

如何让代码高亮?

百度编辑器已经自带了对应的主题文件

image.png

将如图的两个文件引入

然后加入js代码:

SyntaxHighlighter.all();

保存同步到服务器,效果如下:

image.png

但是,会发现行标不对应,而且不会换行,然后没有带下划线,不美观。

先解决换行问题:

加入css样式:

<style>
    .syntaxhighlighter {
        width: 100% !important;
        margin: .3em 0 .3em 0 !important;
        position: relative !important;
        overflow: auto !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ccc !important;
        word-break: break-all;
    }
    .syntaxhighlighter .line
    {
        border-bottom: 1px solid #ced4da !important;
    }
    .syntaxhighlighter .code
    {
        padding: 9.5px 0 9.5px 0px !important;//这里根据实际情况修改对应的px
    }
</style>

效果如下:

image.png

现在换行成功了,但是航标又错位了。

解决错位问题。

加入js代码:

$(function(){
    SyntaxHighlighter.highlight();
    $("table.syntaxhighlighter").each(function () {
        if (!$(this).hasClass("nogutter")) {
            var $gutter = $($(this).find(".gutter")[0]);
            var $codeLines = $($(this).find(".code .line"));
            $gutter.find(".line").each(function (i) {
                $(this).height($($codeLines[i]).height());
                $($codeLines[i]).height($($codeLines[i]).height());
            });
        }
    });
});

效果如下

image.png

问题完整解决,以上部分代码是借鉴多为技术大佬的思想的。

请登陆后在进行评论
  • 随机文章
  • ThinkCMF QQ互联插件教程2——QQ互联插件文件配置

    ThinkCMF QQ互联插件教程2——QQ互联插件文件配置

    ThinkCMF QQ互联插件教程4——QQ互联插件安装使用

    ThinkCMF QQ互联插件教程4——QQ互联插件安装使用

    ThinkPHP5 一个字段对应多个条件查询的解决办法

    ThinkPHP5 一个字段对应多个条件查询的解决办法

    ThinkCMF教程——上传图片添加水印

    ThinkCMF教程——上传图片添加水印

    关于thinkcmf模板配置文件的值修改后无变化的解决办法

    关于thinkcmf模板配置文件的值修改后无变化的解决办法

    ThinkCMF更新升级到5.0.181231后url无法美化的问题,路由设置了没用的解决办法

    ThinkCMF更新升级到5.0.181231后url无法美化的问题,路由设置了没用的解决办法