Junstyle's Blog

wordpress中装上代码高亮插件后，我装的是这个代码高亮插件（SyntaxHighlighter Evolved），其它的代码高亮插件也是一样，大部分都是用的SyntaxHighlighter，包装了一下而已。这个插件有一个比较遗憾的地方，就是没有运行代码的功能，一段html，想很方便的显示代码的效果，还必须把代码copy出来、粘贴才能看到效果。把下面这段代码加入到里的主题文件里面，在html代码片段中，鼠标放在代码片段上的时候就会显示“运行代码”的按钮。主题需引用了jQuery，或者自己加个jQuery的引用也行。

■ 主题中带有jQuery的代码如下：

<!-代码高亮加“运行代码” start-->
<script>
function runcode(code_id){
	var win1=window.open();
	win1.document.open();
	win1.document.write(
		SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixInputString(SyntaxHighlighter.vars.highlighters[code_id].originalCode)
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&amp;/g, '&')
		)
	);
	win1.document.close();
}
jQuery("div[class=syntaxhighlighter  xml]").live("mouseover", function(){
	if(jQuery(".runcode", this).length==0)
		jQuery(".toolbar", this).prepend('<a href="javascript:void(0);" onclick="runcode(jQuery(this).parent().parent().parent().attr(\'id\'))" class="item runcode" style="font-size:12px; width:48px; height:16px; text-indent:0px !important; line-height:16px; margin-top:0px !important;">运行代码</a>');
});
</script>
<!-代码高亮加“运行代码” end-->

■ 主题中不带有jQuery的代码如下：

<!-代码高亮加“运行代码” start-->
<script type="text/javascript" src="修改为你的jquery文件的路径"></script>
<script>
function runcode(code_id){
	var win1=window.open();
	win1.document.open();
	win1.document.write(
		SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixInputString(SyntaxHighlighter.vars.highlighters[code_id].originalCode)
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&amp;/g, '&')
		)
	);
	win1.document.close();
}
jQuery("div[class=syntaxhighlighter  xml]").live("mouseover", function(){
	if(jQuery(".runcode", this).length==0)
		jQuery(".toolbar", this).prepend('<a href="javascript:void(0);" onclick="runcode(jQuery(this).parent().parent().parent().attr(\'id\'))" class="item runcode" style="font-size:12px; width:48px; height:16px; text-indent:0px !important; line-height:16px; margin-top:0px !important;">运行代码</a>');
});
</script>
<!-代码高亮加“运行代码” end-->