网站换了主题,结果发现代码高亮在前台显示出了问题,还以为是百度编辑器的问题,替换来替换去发现根本不是,在网站找到了解决方法:
在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模板头部,至此,问题完美解决。