把下面这段代码加入到里的主题文件里面,在html代码片段中,鼠标放在代码片段上的时候就会显示”运行代码”的按钮。主题需引用了jQuery,或者自己加个jQuery的引用也行。
pre brush里面标记为HTML的代码会自动增加运行功能,其它的代码样式可以对照自己的需要增加
代码可能还要结合你使用的Wordpress主题调试一下
function runcode(code_id){ if(code_id==undefined||code_id==null||code_id=="") return; var code = SyntaxHighlighter.vars.highlighters[code_id].code; code = code.replace(/</g,"<"); code = code.replace(/>/g,">"); code = code.replace(/"/g,"\""); code = code.replace(/'/g,"\'"); code = code.replace(/'/g,"\'"); code = code.replace(/&/g,"&"); if (code!=""){ var pop = popup('', '_blank', 750, 500, ''); pop.opener = null // 防止代码对父窗体页面修改 pop.document.write(code); pop.document.close(); pop.focus(); } } jQuery.noConflict(); jQuery(document).ready(function() { jQuery("div.syntaxhighlighter.html").live("mouseover", function(){ if(jQuery(".runcode", this).length==0) jQuery(".toolbar span", this).prepend('<a href="javascript:void(0);" onclick="runcode(this.parentNode.parentNode.parentNode.id)" class="toolbar_item runcode" style="font-size:12px; width:48px;">运行代码</a>'); }); });
其中的popup弹窗代码请参考http://www.fightfly.com/?action=view&id=397