chaihongjun.me

Ueditor配置语法高亮以及修复换行问题

ueditor.png

网站换了主题,结果发现代码高亮在前台显示出了问题,还以为是百度编辑器的问题,替换来替换去发现根本不是,在网站找到了解决方法:

  1. 在head 模板文件的 <head></head> 区域添加代码来配置代码高亮问题:

<link href="http://hzwlb.org/wp-content/plugins/ueditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="http://hzwlb.org/wp-content/plugins/ueditor/ueditor/third-party/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.highlight();
    });
</script>

CSS和JS都是ueditor文件夹下面就有的第三方插件,原来是换主题之后就没加载了。


2.代码是高亮了,但是代码写长了不换行会超出内容显示区域,继续修复:

修改第三方代码高亮插件的CSS文件:shCoreDefault.css

.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;
    border-radius: 4px !important;
    border-collapse: separate !important;
    word-break:break-all; /* 添加这个修复换行 */
}


3.换行也解决了,但是另外一个问题出现了:因为一行代码显示成两行了,而左侧的行号并未因为而做出改变。这样就会造成高度不统一而错位了。继续解决,用段网上的JS解决:

<script type="text/javascript">
    $(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());
                });
            }
        });
    });
</script>

同样是贴到head模板头部,至此,问题完美解决。


知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»