把下面这段代码加入到里的主题文件里面,在html代码片段中,鼠标放在代码片段上的时候就会显示”运行代码”的按钮。主题需引用了jQuery,或者自己加个jQuery的引用也行。
pre brush里面标记为HTML的代码会自动增加运行功能,其它的代码样式可以对照自己的需要增加
代码可能还要结合你使用的Wordpress主题调试一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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(/&lt;/g,"<"); code = code.replace(/&gt;/g,">"); code = code.replace(/&quot;/g,"\""); code = code.replace(/&apos;/g,"\'"); code = code.replace(/&#39;/g,"\'"); code = code.replace(/&amp;/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