反覆檢查操作步驟，確定已經依照官網說明之方式加入class="brush: html"語法，應該要設定的資料也都沒有發現錯誤。上網找了一下資料，在「Blogger加掛 SyntaxHighlighter，顯示漂亮的彩色程式碼」這篇文章中提到，必需先將大於(>)、小於(<)等HTML特殊符號進行編碼後才可以貼到Blogger的「修改HTML」編輯框‧‧‧之前還真沒特別注意到這件事，難怪貼上的程式碼一直錯誤。
雖然查到問題點是因為HTML特殊符號未轉碼造成，但手邊卻沒有可以處理轉碼的工具，格主在另一篇文章「Blogger文章編輯器的HTML編碼工具(HTML Encode Button) Firefox only」介紹到可以使用Firefox的Greasemonkey外掛來處理，但總是還要再額外安裝，並不是那麼方便。所幸該篇文章的留言中有人建議使用「Format My Source Code for Blogging 」這個線上服務來轉換HTML特殊符號，試用之後發現剛好是我需要的功能，運氣還不錯，馬上就找到解決方法。
「Format My Source Code for Blogging 」的用法很直覺，只需要將程式碼貼上，點選「Format Text」按鈕，就會立即將HTML特殊字元進行編碼並立刻回應在畫面上。操作畫面就如下圖：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>event</title>
<script type="text/javascript" charset="utf-8">
function chkOnBlur(objEle) {
if (objEle.value == "") {
alert("欄位內容不可空白！");
objEle.focus();
}
}
</script>
</head>
<body>
<!-- we will add our HTML content here -->
<script type="text/javascript" charset="utf-8"></script>
<div>
Text1:<input type="text" id="text1" tabindex="1" onblur="chkOnBlur(this)" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div>
Text2:<input type="text" id="text2" tabindex="2" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div>
Text3:<input type="text" id="text3" tabindex="3" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div id="ErrMessage">
</div>
</body>
</html>
那要如何將Format My Source Code for Blogging轉出的編碼資料改由SyntaxHighlighter處理顯示效果？步驟如下：
- 不要勾選「Embed Stylesheet」選項進行「Format Text」，則轉出的HTML語法是由<pre class="source-code"><code>顯示的程式碼</code></pre>所組成(也就是不會在<pre>標籤中寫入顯示用的CSS語法)。
- 將<pre class="source-code">標籤替換成<pre class="brush: html">。
- 移除前後的<code></code>標籤(如果沒有移除， 則<code>< /code>標籤會一併出現在畫面上)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>event</title>
<script type="text/javascript" charset="utf-8">
function chkOnBlur(objEle) {
if (objEle.value == "") {
alert("欄位內容不可空白！");
objEle.focus();
}
}
</script>
</head>
<body>
<!-- we will add our HTML content here -->
<script type="text/javascript" charset="utf-8"></script>
<div>
Text1:<input type="text" id="text1" tabindex="1" onblur="chkOnBlur(this)" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div>
Text2:<input type="text" id="text2" tabindex="2" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div>
Text3:<input type="text" id="text3" tabindex="3" style="width: 120px; height: 20px; background-color: #ffffff; text-align: left" value="" />
</div>
<div id="ErrMessage">
</div>
</body>
</html>
對照畫面顯示的效果，Format My Source Code for Blogging看起來比較陽春，比較適合臨時張貼HTML語法使用 (勾選「Embed Stylesheet」選項會將CSS語法附在產生的HTML標籤中，方便直接張貼)；相較之下，SyntaxHighlighter所呈現的方式美觀許多，怪不得成為大多數部落格首選的程式碼顯示工具。
網路上針對SyntaxHighlighter工具的介紹可說相當豐富，底下把幾篇看過之後覺得比較好的文章記錄起來，方便以後參考：
沒有留言:
張貼留言