使用SyntaxHighlighter在页面上高亮代码

最新推荐文章于 2019-04-17 13:09:52 发布

weixin_33907511

最新推荐文章于 2019-04-17 13:09:52 发布

阅读量124

点赞数

文章标签： javascript python java ViewUI

原文链接：https://my.oschina.net/JoeyXieIsCool/blog/413108

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/JoeyXieIsCool/blog/413108