返回列表 發帖

[PHP] 幫 Discuz! 的程式區塊上顏色

Discuz! 內建的 code 區塊在顯示時並沒有特別的處理讓程式碼顯示顏色,因此想自己修改一下讓程式碼顯示顏色,至少要漂亮一點。方式有蠻多種的,主要可分為 Server 端處理或 Client 端處理,分別可參考以下兩篇:

1. dp.SyntaxHighlighter 程式碼色彩顯示工具
2. [PHP] GeSHi - 程式碼色彩顯示工具(Highlighter)

本站是 focus 在 JavaScript 的技術討論,理所當然要選擇 dp.SyntaxHighlighter 這套以 JavaScript 實做的方案囉。如果你也想把自己的討論區修改一下程式碼的顏色顯示,請參考以下的說明。

修改 viewthread.php:主要是加入 $codeclasses 這個 array,要用來存放有多少種 code (js, php, xml...) 有被解析到,以作為 include js 的依據。

找:
$postlist = $attachtags = $attachlist = array();
修改為:
$codeclasses = $postlist = $attachtags = $attachlist = array();
修改 include/discuzcode.func.php :要把原本解析 code 的程式碼改成自己的。

找:
function codedisp($code) {
在這一段前面加上:
function jscodedisp($code, $para) {
        global $codeclasses;
        if ($para == "") $para = "javascript";
        $class = split(":", $para);
        $codeclasses[strtolower($class[0])] = 1;
        $code = jscode_br_encode($code);
        return "<pre name=\"code\" class=\"$para\">$code</pre>";
}
function jscode_br_encode($str) {
        $str = str_replace("\r\n", "[JSCODE_RN]", $str);
        $str = str_replace("\r", "[JSCODE_R]", $str);
        $str = str_replace("\n", "[JSCODE_N]", $str);
        return $str;
}
function jscode_br_decode($str) {
        $str = str_replace("[JSCODE_RN]", "\r\n", $str);
        $str = str_replace("[JSCODE_R]", "\r", $str);
        $str = str_replace("[JSCODE_N]", "\n", $str);
        return $str;
}
再找:
if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
這邊請注意,原本是這樣的:
        if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\[code\](.+?)\[\/code\]\s*/ies", "codedisp('\\1')", $message);
        }
        if(!$htmlon && !$allowhtml) {
                $message = $jammer ? preg_replace("/\r\n|\n|\r/e", "jammer()", dhtmlspecialchars($message)) : dhtmlspecialchars($message);
        }
請改為這樣:
        if(!$htmlon && !$allowhtml) {
                $message = $jammer ? preg_replace("/\r\n|\n|\r/e", "jammer()", dhtmlspecialchars($message)) : dhtmlspecialchars($message);
        }
        if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\[code\s*(class=)?\"?([^]\"]*)\"?\](.+?)\[\/code\]\s*/ies", "jscodedisp('\\3', '\\2')", $message);
        }
找:
return $htmlon || $allowhtml ? $message : nl2br(str_replace(array("\t", '   ', '  '), array('        ', '   ', '  '), $message));
修改為:
return $htmlon || $allowhtml ? $message : jscode_br_decode(nl2br(str_replace(array("\t", '   ', '  '), array('        ', '   ', '  '), $message)));
修改Template,以 default 為範例,要修改 templates/default/viewthread.htm,這邊主要是加上 include javascript 檔案,不過我的做法算是有點偷懶,不算很正統,如果有人比較熟悉這部分的修改方式,請直接告訴我無妨。

直接新增這一段在檔案的最後:
<? include('include/jscode.func.php'); ?>
然後新增一個檔案 include/jscode.func.php
<?
#wmh - code hightlight
$syntax_languages = array(
                'Cpp'        => array('cpp', 'c', 'c++'),
                'CSharp'=> array('c#', 'c-sharp', 'csharp'),
                'Css'         => array('css'),
                'Delphi'=> array('delphi', 'pascal'),
                'Java'  => array('java'),
                'JScript'=> array('js', 'jscript', 'javascript'),
                'Php'   => array('php'),
                'Python'=> array('py', 'python'),
                'Ruby'  => array('rb', 'ruby', 'rails', 'ror'),
                'Sql'   => array('sql'),
                'Vb'    => array('vb', 'vb.net'),
                'Xml'   => array('xml', 'html', 'xhtml', 'xslt'));
function jscodeinc($codeclasses) {
        global $syntax_languages;
        if (count($codeclasses) == 0) return;
        $syntax_output = "";
        
        foreach ($codeclasses as $class => $value) {
                if ($value !== 1) continue;
                foreach ($syntax_languages as $syntax_term => $syntax_aliases) {
                        $matched = false;
                        foreach ($syntax_aliases as $syntax_aliase) {
                                if ($class == $syntax_aliase) {
                                        $syntax_output .= "<script src=\"include/javascript/dp.SyntaxHighlighter/Scripts/shBrush{$syntax_term}.js\" type=\"text/javascript\"></script>\n";
                                }
                        }
                        if ($matched) break;
                }
        }
        if ($syntax_output == "") return;
        ?>
        <link type="text/css" rel="stylesheet" href="include/javascript/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
        <script src="include/javascript/dp.SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"></script>
        <?= $syntax_output ?>
        <script language="javascript">
        dp.SyntaxHighlighter.ClipboardSwf = 'include/javascript/dp.SyntaxHighlighter/Scripts/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
        </script>
        <?
}
jscodeinc($codeclasses);
?>
最後是 JavaScript 核心的部分,請直接至 SyntaxHighlighter 的官方網站下載檔案,解壓縮到 include/javascript 底下,目錄結構為
include/javascript/dp.SyntaxHighlighter/Scripts
include/javascript/dp.SyntaxHighlighter/Styles
原本在壓縮檔根目錄的那些範例可以刪除,Templates\ 那個目錄也可以刪除,Styles\ 底下有個 TestPages.css 也可以刪除。

以上順利完成之後,應該就可以用新的方式顯示程式碼囉,這一套程式一共支援 11 種不同的程式語言,雖然顏色並非很豐富,不過也算是簡單美觀的。

對了,如果你的討論區是有開緩存(cache),預設其實都是有開啟的,請記得刪除一個暫存檔 forumdata/templates/1_viewthread.tpl.php,這樣才不會因為緩存的關係而沒有更新到 Template 喔。

更新到 Discuz! 6.0 之後,修改的方法大致相同,主要差在 code block 中 <li> 標籤的左邊界設定,因此需要再額外增加以下修改:

修改 templates/default/css.htm

找:
.t_msgfont li, .t_bigfont li, .t_smallfont li, .faq li { margin-left: 2em; }
在這一段後面加上:
.dp-highlighter li {margin-left: 0em;}
最後更新緩存即可正常顯示。
To infinity and beyond!

TOP

本帖最後由 darknight1611 於 2010-7-13 22:32 編輯

hello! i'm from Viet Nam, I have difficulty in creating hightlight syntax for discuz http://jsgears.com/thread-15-1-1.html, Can you share files  discuzcode.func.php? and where's location file jscode.func.php ?
You can mail me via the address: darknight1611@yahoo.com
Thank you!
Array[i]

TOP

返回列表 回復 發帖