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