jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2007-7-28 14:42

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

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

1. [url=http://jsgears.com/thread-9-1-1.html]dp.SyntaxHighlighter 程式碼色彩顯示工具[/url]
2. [url=http://jsgears.com/thread-7-1-1.html][PHP] GeSHi - 程式碼色彩顯示工具(Highlighter)[/url]

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

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

找:[code php]$postlist = $attachtags = $attachlist = array();[/code]
修改為:[code php]$codeclasses = $postlist = $attachtags = $attachlist = array();[/code]

[b][color=blue]修改 include/discuzcode.func.php [/color][/b]:要把原本解析 code 的程式碼改成自己的。

找:[code php]function codedisp($code) {[/code]
在這一段前面加上:[code php]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;
}
[/code]

再找:[code php]if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {[/code]
這邊請注意,原本是這樣的:[code php]        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);
        }
[/code]
請改為這樣:[code php]        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);
        }
[/code]

找:[code php]return $htmlon || $allowhtml ? $message : nl2br(str_replace(array("\t", '   ', '  '), array('        ', '   ', '  '), $message));[/code]
修改為:[code php]return $htmlon || $allowhtml ? $message : jscode_br_decode(nl2br(str_replace(array("\t", '   ', '  '), array('        ', '   ', '  '), $message)));[/code]

[b][color=blue]修改Template[/color][/b],以 default 為範例,要修改 templates/default/viewthread.htm,這邊主要是加上 include javascript 檔案,不過我的做法算是有點偷懶,不算很正統,如果有人比較熟悉這部分的修改方式,請直接告訴我無妨。

直接新增這一段在檔案的最後:[code php]<? include('include/jscode.func.php'); ?>[/code]

[b][color=blue]然後新增一個檔案 include/jscode.func.php [/color][/b]:[code 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);
?>[/code]

[b][color=blue]最後是 JavaScript 核心的部分[/color][/b],請直接至 [url=http://code.google.com/p/syntaxhighlighter/]SyntaxHighlighter 的官方網站[/url]下載檔案,解壓縮到 include/javascript 底下,目錄結構為[code]include/javascript/dp.SyntaxHighlighter/Scripts
include/javascript/dp.SyntaxHighlighter/Styles[/code]原本在壓縮檔根目錄的那些範例可以刪除,Templates\ 那個目錄也可以刪除,Styles\ 底下有個 TestPages.css 也可以刪除。

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

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

wmh 發表於 2008-1-27 13:27

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

修改 templates/default/css.htm

找:[code css].t_msgfont li, .t_bigfont li, .t_smallfont li, .faq li { margin-left: 2em; }[/code]

在這一段後面加上:
[code css].dp-highlighter li {margin-left: 0em;}[/code]

最後更新緩存即可正常顯示。

darknight1611 發表於 2010-7-2 00:06

[i=s] 本帖最後由 darknight1611 於 2010-7-13 22:32 編輯 [/i]

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

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.