SyntaxHighlighter与ajax联合使用遇到的问题
2010-03-11 14:55
399 查看
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>
效果没啥变化：
难道是Ajax的问题？ 请JS达人帮忙。
-----解决方法----
js赋值以后，调用：SyntaxHighlighter.highlight()
SyntaxHighlighter参数：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
使用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>
效果没啥变化：
难道是Ajax的问题？ 请JS达人帮忙。
-----解决方法----
js赋值以后，调用：SyntaxHighlighter.highlight()
SyntaxHighlighter参数：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SyntaxHighlighter与ajax联合使用遇到的问题
- 使用Ajax.net遇到的问题-使用会话时提示错误"只有在配置文件或 Page 指令中将启用会话状态设置为真时，才可以使用会话状态
- 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
- liferay过程中使用ajax所遇到的问题
- yii 使用cactiveform 创建表单时候遇到的一些验证问题和使用ajax_form时重置验证规则的解决办法
- 使用ajaxuploadfile遇到的问题处理
- 初学AJAX遇到的的问题：使用javascript代码调用服务端代码时提示'WebForm1'未定义
- jQuery 使用ajax提交遇到兼容性问题及解决方法
- 使用ajax遇到的一些小问题
- 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
- zTree3.5使用ajax请求返回json数据时遇到的问题
- ajax2级联动，遇到一个异步优先级问题，使用settimeout 解决
- 表单包含file上传文件提交，使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- 使用jquery datatables插件遇到fnReloadAjax的问题
- JQuery中使用ajax提交表单遇到的问题
- Jquery的ajax在h-ui使用时遇到的问题
- IE7中使用AJAX遇到的一个问题
- 在ajax使用过程遇到的数组传值问题
- 使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;
- Asp.Net Mvc 4 使用Ajax 遇到的问题