如果是一個技術行的部落格，釋出程式碼是經常用到的，使程式碼高亮顯示，使用者體驗大大提高。然而 WordPress 預設的編輯器不好新增程式碼，如果你直接從視覺化狀態下寫下程式碼，很有可能被刪減一些。。所以我們得自己將程式碼轉換成 html 實體。
什麼是 html 實體？像 「<」 之類的字元，在 html 中擁有特殊的含義，如果我們要將諸如 「<」 的字元在瀏覽器中正確的顯示出來，我們必須在 html 程式碼中使用字元實體，字元實體有三部分：一個和號 (&)，一個實體名稱，或者 # 和一個實體編號，以及一個分號 (;) 。要在 HTML 檔案中顯示小於號 「<」，我們需要這樣寫：< 或者 < 所以我們將要顯示的程式碼中的一些符號轉換成 html 實體，這樣瀏覽器就可以正確顯示了。
瀏覽器正確顯示後，我們還需要新增 css 。。才能讓它們高亮顯示。
這兩個工作看起來很複雜，如果手動完成，工作量巨大，所以我們使用工具來完成，有一款小工具：下載 CodeRenderUnmi(摘自知更鳥) 。使用這個小工具，可以將你輸入的程式碼全部轉換成 html 實體，並且加上類名。
介面：
你可以選擇你的程式碼型別，使得程式碼有正確的不同的著色，還可以選擇 Gutter(行號) 、 Columns(列)... 在 Source Code 中貼上你的原始碼, 然後點選 Render 就會在下面生成 html 程式碼和樣式預覽，點選 HTML code 哪裡的 copy 複製 html 程式碼, 然後將程式碼貼上到文章中，注意貼上到文章中時, 需要在 html 模式下貼上, 這樣，程式碼已經能正確顯示了。
然後進行著色：小工具壓縮包裡面帶有一個 highlight.css 檔案, 它雖然推薦你在頁面頭部新增外部樣式連結, 也就是加入下面的程式碼：
- <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />
但是我不這樣建議你, 這樣會增加開啟網頁時的請求次數, 將 highlight.css 中的 css 程式碼複製出來, 然後寫入到主題的 style.css 檔案中，這才是上上策。這樣整個站點也只有一個 css 檔案... 使用其它外掛的時候同樣可以自行改動...