chaihongjun.me

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

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

  • 在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 国际许可协议进行许可。作者:柴宏俊»