内容

1.如果想在“代码语言”块中,让语言显示颜色的话

把如下块中的,加在显示页面的head中,即可

<script type="text/javascript" src="/ueditor1_4_3/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="/ueditor1_4_3/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>



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;

改成:

.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;

多了:

word-break:break-all;



3.处理换行问题

当有了行号后,当一行太长发生自动换行时,其行号并未自动跟着调整,处理如下

<script type="text/javascript" src="/ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="/ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/shCoreDefault.css">
<script src="/static/js/jquery-1.8.0.min.js"></script>
<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>




参考文章:

https://my.oschina.net/u/2296413/blog/494837

http://www.3lian.com/edu/2013/12-13/115386.html

http://www.udier.com/Blog/Article/Show/baidu-ueditor-highlighter-fix

http://www.programgo.com/article/2703379589/;jsessionid=529983F68DE63B873BCBE79A5071A404