syntaxHighLighter是一個蠻不錯的Blog語法工具,可以High Light文章中的程式碼
使用的方法是先下載下來,再將裡面相關的javascript檔案和css上傳到自己的網頁空間
如果沒有網頁空間可以到Google Pages申請一個
然後到 範本->修改HTML 將下列的語法貼到 </body> </html> 前面
也有人是貼文章時才貼在文章中,這樣可以提升載入的速度

<br /><link href="http://你的網頁空間網址/SyntaxHighlighter.css" rel="stylesheet" type="text/css"><br /><script class="javascript" src="http://你的網頁空間網址/shCore.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushCSharp.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushPhp.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushJScript.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushJava.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushVb.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushSql.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushXml.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushDelphi.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushPython.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushRuby.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushCss.js"></script><br /><script class="javascript" src="http://你的網頁空間網址/shBrushCpp.js"></script><br /><br /><script class="javascript"><br />//<![CDATA[<br />dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';<br />dp.SyntaxHighlighter.HighlightAll('code');<br />//]]><br /></script><br />

要使用時則加上
<br /><textarea name='code' class='language'><br />程式碼<br /></textarea><br /><br />or<br /><br /><pre name='code' class='language'><br />程式碼<br /></pre><br />

language可以是c-sharp, css, c, delphi, java, js, php, python, ryby, sql, vb, xml

因為Blogger預設會替文章中的每行文字加上<br />,
所以在Blogger中使用SyntaxHighLighter時,程式碼的每行後面都顯示<br />
解決的方法是將上面貼的最後一段JavaScript改成
<br /><script class='javascript'><br />//<![CDATA[<br /> function FindTagsByName(container, name, Tag)<br /> {<br /> var elements = document.getElementsByTagName(Tag);<br /> for (var i = 0; i < elements.length; i++)<br /> {<br /> if (elements[i].getAttribute("name") == name)<br /> {<br /> container.push(elements[i]);<br /> }<br /> }<br /> }<br /> var elements = [];<br /> FindTagsByName(elements, "code", "pre");<br /> FindTagsByName(elements, "code", "textarea");<br /> <br /> for(var i=0; i < elements.length; i++) {<br /> if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {<br /> var childNode = elements[i].childNodes[0];<br /> var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));<br /> elements[i].replaceChild(newNode, childNode);<br /> <br /> }else if(elements[i].nodeName.toUpperCase() == "PRE") {<br /> brs = elements[i].getElementsByTagName("br");<br /> for(var j = 0, brLength = brs.length; j < brLength; j++) {<br /> var newNode = document.createTextNode("\n");<br /> elements[i].replaceChild(newNode, brs[0]);<br /> }<br /> }<br /> }<br /> dp.SyntaxHighlighter.HighlightAll("code");<br />//]]><br /></script><br />

這段code主要目的是把TextArea和Pre中的<br />拿掉
對DOM而言,Pre中的<br />算Child Node, TextArea中則不是
所以需要分開處理
如果是TextArea,則直接把<br />都換成\n(21,22行)
如果是Pre,則一個一個把ChildNode取代掉(27,28行)

幾年沒寫Javascript,一段簡單的code寫了好幾天>"<
主要是沒搞懂textarea和pre的差異...
另外有些DOM的語法IE和FireFox的支援程度不同也沒搞懂
這年頭的JavaScript真是愈來愈複雜了....


Counter Stats

free web counters Counter