在 Blogger 文章裡貼貼 source code 程式碼的方法

許多人常會需要在blog 文章貼程式碼, 如果把 source code 直接貼上去, 不容易對齊, 不容易讀. 如果用一個框框將程式碼包起來，既美觀又易讀.

最後產生的畫面如下:

要做出上面的效果, 步驟如下:
step 1. 開啟你的 Notepad++, 找到你的 source code, 並全部選取(反白):

說明: 這些 tag 直接貼到 blogger 裡, 會完全看不到字, 或著是會沒有斷行, 字全部擠在一行裡.


step 2: 使用 Notepad++ [TextFX] 外掛, 選擇 [TextFX Convert], 再選 Encode HTML.

說明: 新的 Notepad++ 沒有內建這一個 TextFX plugin (NppTextFX.dll), 需要另外下載到 Notepad++ 的 \Program Files\Notepad++\plugins\ 資料夾下.


step 3: HTML encode 後的畫面如下:

step 4: 把 encode 後的貼到 blogger 的 HTML, 還要在最前面加

 的 tag, 在最後面, 再加上 

即可完成.

附上 pre 完整的 tag:

<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace, Courier New; font-size: 13px; line-height: 15px; overflow: auto; padding: 8px; width: 100%;">