今天需要做一个功能：在页面上提供java代码的显示，查了一下，据说oschina用的就是SyntaxHighlighter这个工具。
我下载了3.0.83这个版本，使用的时候也确实很方便，首先，在页面<head>中加上：
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <!-- These JS files are from SyntaxHighlighter --> <script type="text/javascript" src="js/shCore.js"></script> <script type="text/javascript" src="js/shBrushJava.js"></script> <!-- These CSS files are from SyntaxHighlighter --> <link type="text/css" rel="stylesheet" href="style/shCore.css"/> <link type="text/css" rel="stylesheet" href="style/shCoreDefault.css"/>
如果想使用不同的风格，则需要引用不同的JS和CSS文件。
然后，在</body>后面可以加上如下的jQuery代码：
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
</script>
这样才能高亮所有代码，至于还有别的复杂设置，例如 SyntaxHighlighter.config.bloggerMode = true;等等，我这里没有涉及，只是用一些基本的功能。最后，在需要显示代码的HTML正文中，使用下面这种方式：
<pre class=‘brush: java‘>
@Override
public void init(FilterConfig cfg) throws ServletException {
super.init(cfg);
OnlineUserManager.init();
//this._dataInit();
}</pre>
上面的方法是对于HTML页面中已有代码的情况有效，如果这些代码是通过Ajax获取然后再动态append到<pre>标签中的，那么用SyntaxHighlighter.all();就不行了，需要改成SyntaxHighlighter.highlight();
时间： 2024-08-24 11:27:48