博客園里大家都分享了很多的有用知識(shí)，看到好的代碼，總想拿到手上去試一下，然后慢慢體會(huì)！如果是展示一段完整能運(yùn)行的代碼，若能給讀者提供一個(gè)【運(yùn)行代碼】的按鈕，就方便多了！前兩天開(kāi)通了博客園的JS權(quán)限（發(fā)郵件到contact@cnblogs.com可以申請(qǐng)開(kāi)通），今天先拿這個(gè)試了一下手，先來(lái)體驗(yàn)一把吧：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>為行博客園中的代碼添加一個(gè)運(yùn)行代碼按鈕</title></head><body><h1>Hello, world!</h1></body></html>
運(yùn)行上面的代碼
點(diǎn)右上方的按鈕試試看吧！沒(méi)錯(cuò)，在一個(gè)新窗口中正確的顯示了Hello, world!下面來(lái)說(shuō)一下實(shí)現(xiàn)的步驟：
【情況分析】
博客園里正常插入的代碼是由一個(gè)這樣的大致結(jié)構(gòu)組成的，如下所示：
<div class="cnblogs_code"> <pre> //這里是你的代碼 //不過(guò)這段代碼是經(jīng)過(guò)cnblogs編輯器重新組織的一段html代碼 </pre></div>
只要能夠獲得這個(gè)cnblogs_code下pre里的內(nèi)容，并將這一段內(nèi)容輸出到一個(gè)新的窗口中，目標(biāo)基本就實(shí)現(xiàn)了。這個(gè)實(shí)現(xiàn)的方法很簡(jiǎn)單，直接用jQuery就可獲得，代碼如下：
var code = $('.cnblogs_code').text();//注意這里不要用html()，否則你得到的將是一段cnblogs編輯器重組后的html代碼