#include <stdio.h>
int main() {
printf("hello world");
}
很美的 Code HighLight 對吧 ^^
其實 WordPress 官方網站那兒有收集很多關於程式碼HighLight 的外掛 , 但我比較之後覺得 WP-CodeBox 比較漂亮 , 但這個外掛如同其他的同類外掛都有一個問題 , 那就是會因為編輯器自動修改程式碼的一些特殊字串之後 , 導致顯示失敗 , 例如程式碼中有雙引號 , 大於及小於的符號就會有問題 , 但我稍微看了一下這個外掛的原始碼 , 我發現改一行就好了 , 提供心得給大家試試看
WP-CodeBox 安裝方法
- 先到網址 http://wordpress.org/extend/plugins/wp-codebox/ 去下載最新版 , 然後如同安裝其他 Plugin 一樣解開該壓縮檔後 , 放到 WordPress 的 wp-content/plugins 目錄下
- 在 WordPress 的管理畫面去啟動該外掛即可
修正 WP-CodeBox 問題
- 用文字編輯器打開 /wp-content/plugins/wp-codebox/main.php
- 找到一行 $code = wp_codebox_code_trim($match[5])
- 更改為 $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 ,請參考本篇說明
通告: 壞蛋的部落格 » WordPress 的 FckEditor 新增樣式以搭配 WP-CodeBox
通告: 不吃魚的虎斑貓 » Blog Archive » 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight
通告: 不吃魚的虎斑貓 » [WordPress] 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight
通告: 筆記本
通告: 就是,蛋!
不好意思…
雖然本篇教學跟syntaxhighlighter無關
但我發現 syntaxhighlighter 也是會先轉入 html
導致我貼的程式碼會變異
不曉得這是否也可以修改呢?
應該是可以 , 但我沒去研究 syntaxhighlighter 耶 , 我在想應該和 wp_codebox 一樣不難改吧 , 找到關鍵那一行應該就可以了
通告: 編寫WP文章的小技巧 | 在水一方
通告: Tivon's blog » Blog Archive » WP-CodeBox_程式碼顯示_外掛
通告: [WordPress] 安裝plugins wp-codebox | 資訊安全管理系統(WU, CHUNG-MING)
通告: 介紹 WordPress 外掛 WP-CodeBox 支援程式碼 HighLight « Waht I C & What I Collect :)
現在比較好的解決方案是利用 javascript 來動態改寫 pre 或 code 裡的內容來達成 highlight 效果, 例如 google-code-prettify 應該算是目前最流行的!