偶爾在日誌中加入一些程式碼，感覺完全沒必要安裝程式碼高亮外掛，萬一某天不用外掛了，頁面可能會很亂。其實大部分外掛都是在程式碼中強行加入一些標籤，然後用 CSS 定義樣式，透過檢視頁面原始檔可以清楚地看到。

有一個叫 「發芽網」 的線上程式碼高亮轉換網站。透過線上程式同樣是向程式碼中加入不同的標籤，然後定義樣式，如果感興趣可以到發芽網試試，但每次轉換都需開啟網址操作略顯麻煩，不是本篇介紹的重點。

今天推薦的是一款本地轉換程式碼高亮顯示的小工具：CodeRender，本程式是基於 dp.SyntaxHighlighter 寫的程式碼語法著色的工具。支援的語言有：

java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi 。

可方便用於你的部落格中貼上程式碼，只要自定相應的樣式 （highlight.css 的內容，.Text 支援自定義樣式或在模板里加上語法樣式），然後複製用這個工具生成的 HTML 程式碼就能讓你的程式碼著高亮顯示。 可以加入更多語種的支援，本程式就是在 dp.SyntaxHighlighter 的基礎上擴充套件了對 Perl 語言的支援，網上可以找到相應語法的 JS 程式碼和 CSS 。語言擴充套件支援透過在 shCore.js 和 highlight.css 加入相應程式碼即可。

程式介面

操作很容易，Source Code 中貼上你要著色的程式碼，然後選擇語種，點選 Render 按鈕就會在 HTML Code 中生成相應的 HTML 程式碼，同時在 HTML Preview 中可以預覽到效果。

簡 要說明：Lang 下拉框可以選擇所支援的語法，Options 右邊的 Gutter 、 Controls 、 CollapseAll 、 FirstLine 、 Columns 是控制生成的額外的元素，逐一點試試就知道了。每個內容顯示 (輸入) 區都提供了 Copy/Paste/Clear 快捷操作連結，還有一個總的 Clear 按鈕。

Copy 生成 的 HTML 程式碼，在日誌編輯視窗切換到 HTML 原始碼編輯模式，貼上就可以了。

不過要想正確顯示程式碼高亮還需在 WordPress 主題中載入樣式檔案 「highlight.css」（在下載的壓縮包中）

方法：

首先，把 highlight.css 上傳到所使用主題目錄中；

其次：開啟 header.php，查詢：

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

在後面新增：

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />

當然，你也可以複製 highlight.css 中的所有程式碼到你主題 style.css 中，以上步驟就免了！

如認為預設的樣式不符合自己的要求，可以透過修改 「highlight.css」 中的樣式改變程式碼高亮、邊框、背景等顏色，更個性化。

但需要注意的是 WordPress 會自動把半形符號替換為全形，別人複製下來的函式程式碼標點是全形的，無法使用，切記！

解決辦法：

  1. 開啟並編輯 wp-includes/formatting.php 檔案，找到以下程式碼：
  2. // static strings
  3. $curl = str_replace($static_characters, $static_replacements, $curl);
  4. // regular expressions
  5. $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
  6. 將 $curl 開頭的兩句程式碼註釋掉，如下：
  7. // static strings
  8. //$curl = str_replace($static_characters, $static_replacements, $curl);
  9. // regular expressions
  10. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);

效果如下：

PHP:

CSS: