今天在研究SyntaxHighlighter的着色,感觉效果挺不错,但在和kindEditor整合时,总不是我要的效果,最后检查发现SyntaxHighlighter貌似没有异步着色的效果,即:页面渲染完成后,通过点击按钮去给页面div设置要着色的内容。。。我发现这样并不能让里面代码着色了,有了解的兄弟麻烦帮忙啊,谢谢了,以下是代码内容
Html代码 收藏代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello SyntaxHighlighter</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.all();
function click() {
var d=document.getElementById('testContent');
var html=[];
html.push('<pre class="brush: js;toolbar:false;">');
html.push('function helloSyntaxHighlighter()\n');
html.push('{\n return "hi!";\n}');
html.push('</pre>');
d.innerHTML=html.join('');
}
</script>
</head>
<body style="background: white; font-family: Helvetica">
<a target="_blank" href="http://alexgorbatchev.com/SyntaxHighlighter/">超链接</a>
<h3>这里是JS演示代码: 由JS异步设置代码内容</h3>
<button onclick="click()">转换</button>
<div id="testContent">
</div>
</html>
应该这样,使用SyntaxHighlighter.highlight();
Java代码 收藏代码
<script type="text/javascript">
function syntaxHighlighter() {
var d=document.getElementById('testContent');
var html=[];
html.push('<pre class="brush: js;toolbar:false;">');
html.push('function helloSyntaxHighlighter()\n');
html.push('{\n return "hi!";\n}');
html.push('</pre>');
d.innerHTML=html.join('');
SyntaxHighlighter.highlight();
}
</script>
why??? all的实现 它是绑定到window.onload 所以 Java代码 收藏代码
/**
* Main entry point for the SyntaxHighlighter.
* @param {Object} params Optional params to apply to all highlighted elements.
*/
all: function(params)
{
attachEvent(
window,
'load',
function() { sh.highlight(params); }
);
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。