老怪的挨踢日誌: [WLW] 使用 Windows Live Writer ＋ SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)

本篇介紹如何運用 Windows Live Writer 和 SyntaxHighlighter (高亮度彩色程式碼關鍵字)的整合，一起來編輯文章中的程式碼，讓你文章中的程式碼更容易觀看，就如同現在經常看到的程式編輯器一樣，會將你的程式碼中的指令、關鍵字...等，用不同的顏色來顯示。

備註：寫著寫著沒想到此篇文章卻變的很長，不容易觀看，也想不到一篇文章居然修修改改了一星期，因此稍微編排一下段落，文章分為以下幾個段落：

一、前言 (通常前言=廢話，可跳過)

二、軟體需求

三、安裝及設定步驟

四、在 Windows Live Writter 插入程式碼的操作

五、在 Blogger 的配合設定 (更新于 2008-12-17)

六、優缺點

七、參考文章

一、前言：

每次在文章中想要秀出程式碼，總是覺得不方便，早期是採用 <code>...</code> (可參考之前的文章: 將程式碼顯示在Blogger上) 的方式，但是每次都得要作好幾道步驟：轉碼、切換HTML編碼、用 code 標籤包起來、貼上程式碼、每一行最後加上 br 換行、切換網頁檢視、挑關鍵字、改顏色...，才能在文章中秀出比較可看的程式碼，實在是非常的不便和麻煩。

雖然很早就知道有 SyntaxHighlighter 這個好工具，但是有幾個原因讓我一直沒有更換：

程式碼之間可用 Textarea or Pre 標籤如下格式包起來。（詳細作法請參考文章中1~4項的介紹。）這種作法和我之前採用的 code 標籤方式類似 (可參考之前的文章: 將程式碼顯示在Blogger上) ，都必須將程式碼的前後用標籤包起來，而 code 標籤算是最簡單的方式，沒有分辨程式語法及彩色關鍵字功能，一切得完全靠自己手動。下圖的顯示就是用 code 標籤的處理結果：(2008-12-17更新)
```
<textarea name='code' class='程式碼的語法名稱'>
...程式碼...
</textarea>

or

<pre name='code' class='程式碼的語法名稱'>
...程式碼...
</pre>
```
需要將 Javascript 放置在自己的網頁空間，但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫，我又懶的申請其他空間。
使用 Windows Live Writer 編輯文章時，還是得切換檢視方式。（在[版面配置]及[HTML編碼]二邊切換＋編輯）

後來雖然有安裝測試 InsertCode，但是整體上操作還是感覺有些不方便。

直到看到 LiveWriter SyntaxHighlighter Plugin--點部落的介紹，才決定測試及改成SyntaxHighlighter 的方式。（目前使用 SyntaxHighlighter 1.5.1）

二、軟體需求：

三、安裝及設定步驟如下：

安裝 SyntaxHighlighter for Windows Live Writer ，打開網頁後，在下圖中的位置下載安裝檔案，然後再執行安裝即可。(安裝後為英文版 2.00，另外該軟體似乎為日本人寫的，有興趣朋友可以下載Source Code研究。)

打開 Blogger 的[版面配置]--[修改HTML]，將下列CSS語法放在 ]]></b:skin> 前面。或是先行下載http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css 再將內容貼上。（測試過採用link方式直接連結Google的CSS檔案，卻不能正確顯示）（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）

.dp-highlighter {
 font-family: "Consolas","Courier New",Courier,mono,serif;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; 
 /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span {
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover {
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar { padding-left: 45px; }
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar { padding-left: 0px; }

.dp-highlighter ol {
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; 
 /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li {
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div {
 list-style: decimal-leading-zero;
 /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div { border: 0; }

.dp-highlighter .columns {
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div { padding-bottom: 5px; }
.dp-highlighter ol li.alt {
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span {
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol { margin: 0px; }
.dp-highlighter.collapsed ol li { display: none; }

/* Additional modifications when in print-view */

.dp-highlighter.printing { border: none; }

.dp-highlighter.printing .tools {display: none !important;}
.dp-highlighter.printing li {display: list-item !important;}

/* Styles for the tools */

.dp-highlighter .tools {
 padding: 3px 8px 3px 10px;
 font: 9px Verdana,Geneva,Arial,Helvetica,sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools { border-left: 0; }
.dp-highlighter.collapsed .tools { border-bottom: 0; }

.dp-highlighter .tools a {
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover {
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { 
 background-color: #fff;
 color: #333;
 margin: 0px;
 padding: 0px;
}
.dp-about table {
 width: 100%;
 height: 100%;
 font-size: 11px;
 font-family: Tahoma,Verdana,Arial,sans-serif !important;
}
.dp-about td {
 padding: 10px;
 vertical-align: top; 
}
.dp-about .copy {
 border-bottom: 1px solid #ACA899;
 height: 95%; 
}
.dp-about .title {
 color: red;
 background-color: inherit;
 font-weight: bold; 
}
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer {
 background-color: #ECEADB;
 color: #333;
 border-top: 1px solid #fff;
 text-align: right; 
}
.dp-about .close {
 font-size: 11px;
 font-family: Tahoma,Verdana,Arial,sans-serif !important;
 background-color: #ECEADB;
 color: #333;
 width: 60px;
 height: 22px; 
}

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments {
 color: #008200;
 background-color: inherit; 
}
.dp-highlighter .string {
 color: blue;
 background-color: inherit; 
}
.dp-highlighter .keyword {
 color: #069;
 font-weight: bold;
 background-color: inherit; 
}

.dp-highlighter .preprocessor {
 color: gray;
 background-color: inherit; 
}

再把下列語法放在 </head> 前面。（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）

<!-- syntaxhighlighter 1.5.1 -->
//<!-- 此連結CSS的方式，不知道為何不能正確顯示，但是位址是正確的
//<link href='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
//-->
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/shBrushCpp.js' type='text/javascript'/> 

//<!--
//window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成
//後，才進行執行。但若是您先前也有程式使用 window.onload 的話
//，這將是會把前一個 window.onload 的動作給覆蓋。
//此段說明內容來自:德瑞克(Derrick)  網址: http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html
//-->
<SCRIPT type='text/javascript'>
//<![CDATA[
window.onload = function ()  {  
dp.SyntaxHighlighter.ClipboardSwf='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/clipboard.swf';  
dp.SyntaxHighlighter.BloggerMode();  
dp.SyntaxHighlighter.HighlightAll('code');  
}
//]]>
</SCRIPT>

四、在 Windows Live Writter 插入程式碼的操作如下：

點選 WLW 功能表上的[插入]--[Code]，或是右側邊的［插入 Code］。如下二圖：
當出現下圖的視窗後，就可以貼上程式碼及調整設定了，操作如下圖說明：
按OK之後，會把剛剛貼上的程式碼當成一個［物件區塊］，放在WLW編輯的文章中，而程式碼的周圍會出現一個虛線框，如下圖:
當你點選在編輯文章中的程式碼區塊時，就會如上圖出現一個虛線框，而在 WLW 的右側邊欄，則會出現一些可調整顯示的相關功能設定，如下圖：
以上就是設定 Blog 文章中的程式碼方式。

五、在 Blogger 的配合設定：(更新于 2008-12-17)

在 [設定］--［格式］檢查一下如下畫面的設定：轉換分行符號 請選（否），不然會在 </p>、<ol>、</ol>...的後面自動再多加一個 <br /> 換行符號。調整過後，幾乎就能和WLW看到的一樣了。（讓我奇怪的是，以前都不會如此，當然以前我也沒見過轉換分行符號的效果，現在終於看到了。　=.=）

六、優缺點：

優點：

不用在WLW切換檢視，再手動加入或修改語法。（幾乎是所見即所得）
不用另找空間存放 Javascript 然後再做呼叫了。（直接套用 Google 的程式。）
不用再手動調整一些語法顏色。（如果相關註解寫的夠清楚，也是很容易閱讀的。）

缺點：

無法針對程式碼中的一些Code 標上特別的顏色。例如：想特別用顏色註明增加/修改的部份。這時候可以多花點心思在程式碼的註解上了，這不也正是一個程式設計師的好習慣之ㄧ嗎。
程式區塊上方的功能表不是中文。畢竟是直接套用 Google 上的 Javascript，有興趣的朋友可以到SyntaxHighlighter下載完整的程式回來研究，在功能表顯示的部份是在 shCore.js 這個檔案內，可以參考 YEHYEH 網站上提供的 shCore中文化下載，不過該網站上的版本似乎是 1.5，而該作者也有作一些修正，建議不要直接和1.5.1版本混合套用。
過長的程式碼，須手動調整一下，才會比較美觀。在IE6中，超過頁面的程式碼會自動折行顯示；但是在 Firefox 卻是會不會自動折行顯示，而是在程式碼區塊最底下顯示一條滾動條。（在ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉)有提到可以調整 Textarea 和 Pre 標籤的CSS樣式來解決此問題，另找時間測試。而該文雖是轉來的，但是因為原文卻已經找不到了，只好僅放上該連結。）--2008-12-17 更新

七、參考文章：

老怪的挨踢日誌

12.15.2008

[WLW] 使用 Windows Live Writer ＋ SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)

沒有留言:

張貼留言