介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight

#include <stdio.h>
int main() {
    printf("hello world");
}

很美的 Code HighLight 對吧 ^^

其實 WordPress 官方網站那兒有收集很多關於程式碼HighLight 的外掛 , 但我比較之後覺得 WP-CodeBox 比較漂亮 , 但這個外掛如同其他的同類外掛都有一個問題 , 那就是會因為編輯器自動修改程式碼的一些特殊字串之後 , 導致顯示失敗 , 例如程式碼中有雙引號 , 大於及小於的符號就會有問題 , 但我稍微看了一下這個外掛的原始碼 , 我發現改一行就好了 , 提供心得給大家試試看

WP-CodeBox 安裝方法

  1. 先到網址 http://wordpress.org/extend/plugins/wp-codebox/ 去下載最新版 , 然後如同安裝其他 Plugin 一樣解開該壓縮檔後 , 放到 WordPress 的 wp-content/plugins 目錄下
  2. 在 WordPress 的管理畫面去啟動該外掛即可

修正 WP-CodeBox 問題

  1.  用文字編輯器打開 /wp-content/plugins/wp-codebox/main.php
  2. 找到一行 $code = wp_codebox_code_trim($match[5])
  3. 更改為 $code = wp_codebox_code_trim( html_entity_decode( $match[5] , ENT_QUOTES ) );

OK , 大功告成 ,  這樣就不必擔心編輯器自動改 HTML 的困擾問題了 , 但我並不知道我這樣改會出甚麼問題就是了(哈) , 下面是一些程式碼顯示出來的結果

<?php
	class Hello{
		function __construct() {
			echo "Hello";
		}
	}
	$a = new Hello();
?>
public class HelloWorld {
    static public void Main() {
        Console.WriteLine("Hello World");
    }
  }
}

使用方法介紹

你的程式碼必須放在 <pre> 標籤內 , 並且要設定 <pre> 的一些屬性 , 如

<pre lang="語言" line="開始行號" colla="是否展開程式碼">你的程式碼</pre> 如下範例

<pre lang="php" colla="+">
<?php
echo "hello world";
?>
</pre>

當然還有其他的屬性可以用 , 以下是屬性介紹

  • lang : 你的程式碼是甚麼語言寫的 , 例如 java , php , csharp(c#) , cpp(c++)
  • colla : 是否要展開程式碼 , 這個選項是非必需的 , 預設是 - (減號) , 如果一開始就要展開就是寫 + (加號)
  • line : 可以顯示行號 , 這個選項是非必需的 , 如果 line 填 1 , 就從第一行開始顯示 , 也可以填 10 就代表第 10 行開始顯示
  • file : 可以顯示某個檔案的程式碼

官方網站有更多的範例講解 , 有興趣的可以去看看喔 , 網址是 http://www.ericbess.com/ericblog/2008/03/03/wp-codebox

2013-12-05 補充

本篇已過時了,建議大家改用Crayon Syntax Highlighter ,請參考本篇說明

12 則評論在 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight.

  1. 通告: 壞蛋的部落格 » WordPress 的 FckEditor 新增樣式以搭配 WP-CodeBox

  2. 通告: 不吃魚的虎斑貓 » Blog Archive » 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight

  3. 通告: 不吃魚的虎斑貓 » [WordPress] 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight

  4. 通告: 筆記本

  5. 通告: 就是,蛋!

  6. 通告: 編寫WP文章的小技巧 | 在水一方

  7. 通告: Tivon's blog » Blog Archive » WP-CodeBox_程式碼顯示_外掛

  8. 通告: [WordPress] 安裝plugins wp-codebox | 資訊安全管理系統(WU, CHUNG-MING)

  9. 通告: 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight « Waht I C & What I Collect :)

發佈留言