利用 WLW plugin: Syntax Highlighter 貼程式碼

前言

Syntax Hightlighter 是個 Windows Live Writer (WLW) 外掛程式，可以幫助我們在 blog 上貼上程式碼，這是個相當感人的。為什麼呢？因為打從網際網路普及後，個人首頁（烘培基時代）-> 留言板時代 -> 論壇時代 -> Web 2.0 ，管他什麼時代，想在網頁上呈現好看的程式碼一直都是件麻煩的事，以 C/C++ 為例，有討厭的 <, >, 要處理、縮排也是麻煩、更別說要有五顏六色的 syntax highlight。

古來，正房會對二奶說：女人何苦為難女人！我剛開始寫 blog 時，也很想說：程式設計師何苦為難程式設計師！難道寫出 WYSIWYG 的程式設計師都沒有自己的網頁嗎？難道他們都不在自己網頁貼程式碼嗎？怎麼一直沒有一個好一點的編輯工具呢…

不過從來訐譙的人也不會是解決問題的人…所以好多年過去了，終於有好心人做了一些外掛程式來解決我們的需求。Syntax Highlighter 就是一套這樣的軟體，而且還與 WLW 整合在一起，提供了便利的編輯介面。

安裝

1. Syntax Highlighter for Windows Live Writer 可在 http://www.codeplex.com/Highlight4Writer 下載。
2. 下載後，是個壓縮檔，但解壓縮後竟然也沒有安裝檔，竟然是一堆 .dll, .xml 的檔案。
    
   不要慌，根據程式設計師的第八覺，這種程式的安裝方法：通常是把所有檔案、資料夾複製到主程式所在的資料夾下的某某資料夾下。
3. 沒錯，請找出您 Windows Live Writer 安裝的目錄，並將步驟 2 的檔案、資料夾複製到 plugin 下。
   例如：我的 WLW 主目錄是 C:\Program Files\Windows Live\Writer。
   那就請將檔案都複製到 C:\Program Files\Windows Live\Writer\Plugins 下吧。
4. 重開 WLW，會在右方的 toolbar 發現出現了插入 Syntax highlighted t... 的功能（如下圖紅框處）。
    
5. 點下後，會出現一個編輯視窗，就可以貼上複製/打入程式碼了。下面是一個 C++ Hello World 的範例。
   

   #include <iostream>
   using namespace std;
   
   int main()
   {
   	cout << "Hello World\n" << endl;
   	return 0;
   }

More

如果我切換到 HTML 模式去看一下，可以發現程式碼片段變成了：

<pre>#include &lt;iostream&gt;
<span style="color: #0000ff">using</span> <span style="color: #0000ff">namespace</span> std;

<span style="color: #0000ff">int</span> main()
{
	cout &lt;&lt; &quot;<span style="color: #8b0000">Hello World\n</span>&quot; &lt;&lt; endl;
	<span style="color: #0000ff">return</span> 0;
}</pre>

這個外掛程式是透過 inlined css 去標色、排版，跟以往見過的幾個外掛不太一樣，之前見過的外掛程式通常是透過修改 blog template 去 include 別人寫好的 css ，而且會有一些便利的小工具，例如：我目前用的 SyntaxHighlighter ，他是用 JavaScript, CSS, flash 做的，同樣的 hello world 程式碼的版面會豐富點，有複製按鈕可按、相鄰行會變色等：

#include <iostream>
using namespace std;

int main()
{
	cout << "Hello World\n" << endl;
	return 0;
}

不過這套軟體似乎還沒有好心人幫忙與 WLW 進行整合，因此得手動切換到 HTML 模式，與 tag 進行肉搏戰、還要注意 <, > 這類 tag 的轉換 >< 而且由於是 run time 的去 link 外部 css 等程式，因此在 WLW 是無法預覽 syntax highligh 後的效果。