zoukankan      html  css  js  c++  java

  • SyntaxHighlighter与ajax联合使用遇到的问题

    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=' csharp;'> private void a(){} </pre>";
                $.ajax({
                    type:     "post",
                    url:     "Ajax.aspx",
                    data: params,
                    success:     function(msg) {
                            //2
                        document.getElementById("div2").innerHTML = "<pre class=' 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=' 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=' csharp;'> private void a(){} </pre>";
                $.ajax({
                    type:     "post",
                    url:     "Ajax.aspx",
                    data: params,
                    success:     function(msg) {
                            //2
                        document.getElementById("div2").innerHTML = "<pre class=' csharp;'> private void b(){} </pre>";
                    }
                });
                    return false;
            }
                function load1(user) {
                    //1
                document.getElementById("div1").innerHTML = "<pre class=' 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=' 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>

    效果没啥变化：

    难道是Ajax的问题？ 请JS达人帮忙。

     -----解决方法----

    js赋值以后，调用：SyntaxHighlighter.highlight()

    SyntaxHighlighter参数：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
  • 相关阅读:
    c#连接MySQL数据库
    MySQL下载与安装
    python简单页面爬虫入门 BeautifulSoup实现
    vue打包后.woff字体文件路径问题处理
    ReactNative真机运行
    前端知识总结--性能优化
    前端知识总结--ES6新特性
    我的开发框架(WinForm)4
    我的开发框架(WinForm)3
    我的开发框架(WinForm)2
  • 原文地址：https://www.cnblogs.com/tenghoo/p/SyntaxHighlighter_ajax.html
Copyright © 2011-2022 走看看