SyntaxHighlighter与ajax联合使用遇到的问题-优快云博客

本文探讨了使用SyntaxHighlighter插件进行代码高亮时遇到的问题，特别是在通过Ajax动态加载代码片段后，高亮效果无法正常显示的情况。文章提供了两种不同Ajax实现方式的示例，并最终给出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SyntaxHighlighter是一个代码高亮插件，cnblogs的评论也用到了SyntaxHighlighter。SyntaxHighlighter的详细介绍，园子中有很多。这里就不介绍了。

使用JQ的Ajax

说下我遇到的问题，下面是测试页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/>
    <script type="text/javascript">
         SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
         SyntaxHighlighter.all();
    </script>
    <script type="text/javascript">
        function load(user) {
            var params = 'u=' + user;
            //1
            document.getElementById("div1").innerHTML = "<pre class='brush: csharp;'> private void a(){} </pre>";
            $.ajax({
                type: "post",
                url: "Ajax.aspx",
                data: params,
                success: function(msg) {
                    //2
                    document.getElementById("div2").innerHTML = "<pre class='brush: csharp;'> private void b(){} </pre>";
                }
            });
            return false;
        }
    </script>
</head>
<body onload="load('tenghoo');">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

下面是IE6下的显示效果：

上面用到了JQ的Ajax方法，可以看到Ajax执行成功后的赋值操作没有显示出代码高亮的效果。

//2
document.getElementById("div2").innerHTML = "<pre class='brush: csharp;'> private void b(){} </pre>";

手工创建XMLHttpRequest

是JQ的Ajax方法的问题吗？于是我又试了下面的方法：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/>
    <script type="text/javascript">
         SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
         SyntaxHighlighter.all();
    </script>
    <script type="text/javascript">
        function load(user) {
            var params = 'u=' + user;
            //1
            document.getElementById("div1").innerHTML = "<pre class='brush: csharp;'> private void a(){} </pre>";
            $.ajax({
                type: "post",
                url: "Ajax.aspx",
                data: params,
                success: function(msg) {
                    //2
                    document.getElementById("div2").innerHTML = "<pre class='brush: csharp;'> private void b(){} </pre>";
                }
            });
            return false;
        }
        function load1(user) {
            //1
            document.getElementById("div1").innerHTML = "<pre class='brush: csharp;'> private void c(){} </pre>";
            var xh = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xh.open("GET", "Ajax.aspx?u="+user, true);
            xh.onreadystatechange = function() {
            if (xh.readyState != 4) {
                return;
            }
            var v = xh.responseText;
            //2
             document.getElementById("div2").innerHTML = "<pre class='brush: csharp;'> private void d(){} </pre>";
            };
            xh.send();
            return false;
        }
    </script>

</head>
<body onload="load1('tenghoo');">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果没啥变化：