Windows Liver Wirter 寫程式相關文章的外掛:Source Code Formatter


Heresy 在自己的部落格上,其實也算寫了不少程式語言、開發相關的文章了。不過其實在寫的時候,一直覺得要貼程式碼很麻煩、很難弄得漂亮;以前姑且是自己編輯 HTML 的 CSS,盡量讓程式碼和一般內容能做區隔,但是說實話,不但麻煩,就連自己也覺得不是很漂亮…

而最近又在整理 WebGL 的相關文章,又要貼一堆程式到 space 裡了,所以才忽然在想,已經用得很習慣的 Windows Live Writer,有沒有可以輔助這方面的外掛呢?想了想後,Heresy 就跑到 Windows Live Gallery 上,去找找看 Live Writer 的外掛了~

在試了好幾個看起來好像不錯的外掛後,發現有的是產生的內容不能用在 Live Space 上(微軟限制實在太多了…)、有的則是根本不知道怎麼玩?最後,終於找到了一個還算不錯用的外掛,他的名字叫做「Source Code Formatter」,作者個人的網頁是 http://www.amergerzic.com/post/WLWSourceCodePlugin.aspx,如果只是要下載安裝的話可以到 Live Gallery 上的頁面點選。

而他安裝後,會在 Live Writer 的右方「插入」的部分,多出一個「Source Code…」的選項(也可以從上方選單的「插入」裡點選),點下去後,就可以叫出他的界面(如下圖)了~

image

他的基本操作,就是把程式碼貼在左側,然後右側就會出現格式化後的預覽;而上方則還有一些功能可以做調整,基本上算是很簡單就可以把程式碼美化到一定的程度了~而他的做法,就是透過去分析內容,再用大量的 <pre> 以及 inline CSS 格式,來做視覺上的調整了;也由於他用的是很單純的 HTML + CSS,所以理論上應該是適用於絕大部分的 blog 才對。

而用在 Live Space 裡會是怎樣呢?Heresy 有把之前的《用 snprintf / asprintf 取代不安全的 sprintf》一文的程式碼,都改用這個方法來寫了~有杏去的可以看看,Heresy 個人是覺得比本來的寫法好看很多。 ^^"

不過,Heresy 覺得這東西還是有一些缺點,或是說可以改進的地方:

  1. 產生出來的結果不好編輯、修改。
    雖然還是可以自己改 HTML,不過相對起來,重新建立似乎會比較快…

  2. 在 Live Writer 裡的「編輯」模式下,看到的和最後結果不同。
    不過這點應該是 Live Wiriter 的問題了…

  3. 沒有辦法自行定義 highlight 關鍵字、條件
    這點算是滿可惜的…

  4. 似乎沒有辦法處理只有一行的程式?如果只有一行,也會用兩行來顯示。

  5. 單行過長的程式碼在 IE 和 FireFox / Google 瀏覽器會有不一樣的顯示結果;IE 會自動加上橫向捲軸、FireFox 則是就會讓他一路長下去…不過到是可以透過手動指定 <pre> 的寬度,來讓 FireFox 也加上卷軸就是了。

總之,大概就這樣吧。再找到更好的外掛前,Heresy 應該都會先用這東西了。而如果有人有知道有更好的外掛,也歡迎提供一下建議啊!

對「Windows Liver Wirter 寫程式相關文章的外掛:Source Code Formatter」的想法

  1. 話說,現在搬移到 WordPress.com 後,這個外掛產生的 HTML 語法雖然不是完全不能用,但也還是需要修改就是了。

  2. 有些美中不足,Class名稱不能以不同顏色區分出來。不過,這樣已經很棒了。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.