使用SyntaxHighlighter在页面上高亮代码

今天需要做一个功能:在页面上提供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();

你可能感兴趣的:(Ajax)