标签:
今天需要做一个功能:在页面上提供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();
标签:
原文地址:http://my.oschina.net/JoeyXieIsCool/blog/413108