博客園里大家都分享了很多的有用知識(shí)，看到好的代碼，總想拿到手上去試一下，然后慢慢體會(huì)！如果是展示一段完整能運(yùn)行的代碼，若能給讀者提供一個(gè)【運(yùn)行代碼】的按鈕，就方便多了！前兩天開通了博客園的JS權(quán)限（發(fā)郵件到contact@cnblogs.com可以申請(qǐng)開通），今天先拿這個(gè)試了一下手，先來體驗(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)右上方的按鈕試試看吧！沒錯(cuò)，在一個(gè)新窗口中正確的顯示了Hello, world!下面來說一下實(shí)現(xiàn)的步驟：
【情況分析】
博客園里正常插入的代碼是由一個(gè)這樣的大致結(jié)構(gòu)組成的，如下所示：
<div class="cnblogs_code"> <pre> //這里是你的代碼 //不過這段代碼是經(jīng)過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代碼延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式