這個方法的參考網址是：http://skyvee.net/2007/07/code.html
底下為原文收錄：
記得改程式碼前, 要先備分template哦!
1. 請先下載此圖檔, 然後上傳到一個網頁空間... 記錄此圖片網址.(請記得下載, 最好把圖片另存, 萬一skyvee以後不小心砍掉可就麻煩囉!^^")
2. 將以下程式碼, 貼到 <head> </head>之間的CSS區塊,如 <b:skin><![CDATA[
的後面. 其中紅字部分, 要改成另外存的圖片網址哦!
code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(圖片網址並注意大小寫要正確) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}
3. 以上步驟完成後, 只要在文章中, 想把有 程式碼 的那一段區域, 用特別的圖示標出, 就可以用 <code> </code> 包住那段程式碼囉!
效果就會像這篇文章中出現的程式碼一樣
第二個方法，可用於框示各種類程式碼，並有提供複製及列印功能。
這個方法的參考網址是：http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html
原始提供網址是： http://code.google.com/p/syntaxhighlighter/(其Downloads頁面有原始檔可供免費下載)
這部份內容較多，請自行至該二處網址參考使用。
以下，則將該篇原文收錄：
Blogger dp.SyntaxHighlighter斷行問題解決方法
syntaxHighLighter是一個蠻不錯的Blog語法工具,可以High Light文章中的程式碼
使用的方法是先下載下來,再將裡面相關的javascript檔案和css上傳到自己的網頁空間
如果沒有網頁空間可以到Google Pages申請一個
然後到 範本->修改HTML 將下列的語法貼到 </body> </html> 前面
也有人是貼文章時才貼在文章中,這樣可以提升載入的速度
<link href="http://你的網頁空間網址/SyntaxHighlighter.css" rel="stylesheet" type="text/css">
<script class="javascript" src="http://你的網頁空間網址/shCore.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushCSharp.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushPhp.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushJScript.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushJava.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushVb.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushSql.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushXml.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushDelphi.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushPython.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushRuby.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushCss.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushCpp.js"></script>
</link>
<script class="javascript">
//<![CDATA[
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>
要使用時則加上
<textarea name='code' class='language'>
程式碼
</textarea>
or
<pre name='code' class='language'>
程式碼
</pre>
language可以是c-sharp, css, c, delphi, java, js, php, python, ryby, sql, vb, xml
因為Blogger預設會替文章中的每行文字加上<br />,
所以在Blogger中使用SyntaxHighLighter時,程式碼的每行後面都顯示<br />
解決的方法是將上面貼的最後一段JavaScript改成
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);
}else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
這段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真是愈來愈複雜了....
沒有留言:
張貼留言