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