結合 FCKeditor 與 GeSHi 實現 PHP 代碼語法高亮顯示

GeSHi (Generic Syntax Highlighter) 是強大的代碼語法高亮庫，支援 200+ 種語言。本文介紹如何將其整合到使用 FCKeditor 的 CMS 系統中，實現前台代碼高亮展示。

基礎用法：直接高亮字符串

<?php
require_once 'geshi/geshi.php';

$source_code = '<?php echo "Hello World"; ?>';

$geshi = new GeSHi($source_code, 'php');

// 行號顯示
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 5);

// 整體樣式
$geshi->set_overall_style(
    'color: #000066; border: 1px solid #d0d0d0; background-color: #f0f0f0;',
    true
);

// 頭部信息
$geshi->set_header_content('lzy © 2008, View php source');
$geshi->set_header_content_style(
    'font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;'
);

// 底部信息
$geshi->set_footer_content('Parsed in seconds');
$geshi->set_footer_content_style(
    'font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;'
);

// 輸出高亮 HTML
$highlighted = $geshi->parse_code();
echo $highlighted;
?>

CMS 整合方案：前台渲染時處理

後台編輯器（FCKeditor）無需修改，只需在內容中用標記包裹代碼：

[code]PHP 代碼內容[/code]

前台顯示頁面處理邏輯

<?php
// 1. 回調函數處理代碼塊
function geshi_content($matches) {
    $con = $matches[1]; // 獲取 [code] 內容

    // 還原 HTML 實體
    $con = str_replace('&nbsp;', ' ', $con);
    $con = str_replace('&amp;', '&', $con);
    $con = str_replace('&gt;', '>', $con);
    $con = str_replace('&lt;', '<', $con);
    $con = str_replace('&quot;', '"', $con);

    // 去除可能殘留的 HTML 標籤
    $con = strip_tags($con);

    // GeSHi 高亮處理
    $geshi = new GeSHi($con, 'php');
    $geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 5);
    $geshi->set_overall_style('color: #000066; border: 1px solid #d0d0d0; background-color: #f0f0f0;', true);
    $geshi->set_header_content('lzy © 2008, View php source');
    $geshi->set_header_content_style('font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;');
    $geshi->set_footer_content('Parsed in seconds');
    $geshi->set_footer_content_style('font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;');

    return $geshi->parse_code();
}

// 2. 文章內容輸出時替換
$content = preg_replace_callback(
    '/\[code\](.+?)\[\/code\]/s',
    'geshi_content',
    $content
);

echo $content;
?>

優勢分析

• 零侵入編輯器：FCKeditor 等富文本編輯器無需安裝插件
• 分離關注點：編輯時純文本存儲，展示時動態高亮
• 樣式可控：統一通過 GeSHi API 控制輸出風格
• 多語言支持：將 'php' 替換為 'javascript'、'css'、'sql' 等即可支持其他語言

性能優化建議

1. 緩存高亮結果：將 parse_code() 輸出存入數據庫或文件緩存
2. 異步處理：大量代碼塊時考慮隊列異步生成
3. 精簡樣式：移除不必要的 header/footer 以減小 HTML 體積

此方案完美解決了「富文本編輯器難以集成代碼高亮」的痛點，是技術類 CMS、博客、文檔系統的理想選擇。