SyntaxHighlighter代码高亮插件:http://blog.csdn.net/itmyhome1990/article/details/38517737
导入css,js文件:
<link rel="stylesheet" href="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shThemeDefault.css">
<link rel="stylesheet" href="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shCoreDefault.css">
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shCore.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushAS3.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushBash.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushCpp.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushCss.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushColdFusion.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushCSharp.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushDelphi.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushDiff.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushErlang.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushGroovy.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushXml.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushJava.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushJavaFX.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushJScript.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushPerl.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushPhp.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushPlain.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushPowerShell.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushPython.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushRuby.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushScala.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushSql.js"></script>
<script src="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shBrushVb.js"></script>
(shBrushXXX.js就是对应XXX语言的js文件。注:html可以用shBrushXml.js)
html代码:
<pre class="brush: html;">
<table>
<tbody>
<tr>
<td>hello</td>
<td>syntaxhighlighter</td>
</tr>
<tr>
<td>代码</td>
<td>亮起来</td>
</tr>
</tbody>
</table>
</pre>
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false; //去掉右上角问号图标
SyntaxHighlighter.config.tagName = 'pre'; //可以更改解析的默认Tag。
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>
右侧出现滚动条问题:
修改css文件,如shCoreDefault.css中
.syntaxhighlighter table {
width: 100% !important;
}
改成:
.syntaxhighlighter table {
width: 100% !important;
margin: 1px 0 !important;
}
修改代码显示样式:
一共有8种样式:Default,Django,Eclipse,Emacs,FadeToGrey,MDUltra,Midnight,RDark
比如改成RDark:
<link rel="stylesheet" href="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shThemeRDark.css">
<link rel="stylesheet" href="<%=basePath%>ueditor1_4_3_3/utf8-jsp/third-party/SyntaxHighlighter/3.0.83/shCoreRDark.css">