เว็บบอร์ด › Discuz6+ Plugin › CodeSyntaxHighlighter?For Discuz 6.0.0

acaz โพสต์ 2008-2-22 18:41:19

CodeSyntaxHighlighter?For Discuz 6.0.0

Installation Instructions?

Step 1:

1.1 แก้ไขปละเพิ่มภาษาไทยที่ใช้งาน
เปิดไฟลล์ \templates\default\templates.lang.php
?แนะนำ?ถ้าคุณมีภาษาที่เฉพาะ?แนะนำให้ค้นหาเฉพาะคำนำหน้าเท่านั้น?
ค้นหา        'post_discuzcode_input_free' => 'กรุณาใส่ข้อความฟรี',
        'post_discuzcode_input_hide' => 'กรุณาใส่ข้อความที่ต้องการซ่อน',เพิ่มโค๊ดนี้ด้านล่าง        'post_discuzcode_input_csharp' => 'นำเข้าโค๊ดภาษา C',
        'post_discuzcode_input_css' => 'นำเข้าโค๊ดภาษา CSS',
        'post_discuzcode_input_cpp' => 'นำเข้าโค๊ดภาษา C++',
        'post_discuzcode_input_delphi' => 'นำเข้าโค๊ดภาษา Delphi',
        'post_discuzcode_input_java' => 'นำเข้าโค๊ดภาษา Java',
        'post_discuzcode_input_javascript' => 'นำเข้าโค๊ดภาษา JavaScript',
        'post_discuzcode_input_php' => 'นำเข้าโค๊ดภาษา PHP',
        'post_discuzcode_input_python' => 'นำเข้าโค๊ดภาษา Python',
        'post_discuzcode_input_ruby' => 'นำเข้าโค๊ดภาษา Ruby',
        'post_discuzcode_input_sql' => 'นำเข้าโค๊ดภาษา SQL',
        'post_discuzcode_input_vb' => 'นำเข้าโค๊ดภาษา Visual Basic',
        'post_discuzcode_input_xml' => 'นำเข้าโค๊ดภาษา XML',
        'post_discuzcode_input_html' => 'นำเข้าโค๊ดภาษา Html',
        'post_code_tip' => 'Note: คลิ๊ก [ที่นี่] เพื่อดูรายละเอียดทั่วไปรวมทั้งทดสอบและแก้ไขโค๊ดนี้ หรือสั่งพิมพ์!',1.2 เพิ่มโค๊ดสำหรับนำเลือกใช้งาน
เปิดไฟลล์\templates\default\discuzcode.htm
ค้นหาfunction tpl_codedisp($discuzcodes, $code) {
}-->
<!--{block return}--><div class="blockcode"><span class="headactions" onclick="copycode($('code$discuzcodes'));">{lang discuzcode_copyclipboard}</span><h5>{lang discuzcode_code}:</h5><code id="code$discuzcodes">$code</code></div><!--{/block}-->
<!--{eval return $return;}-->
<!--{eval
}เพิ่มโค๊ดนี้ด้านล่างfunction tpl_codecsh($discuzcodes, $codeclass, $codename, $code) {
}-->
<!--{block return}-->
<div class="blockcode"><h5>The $codename code:</h5><div class="dp-msgborder" id="code$discuzcodes" title="Note: คลิ๊ก [ที่นี่] เพื่อดูรายละเอียดทั่วไปรวมทั้งทดสอบและแก้ไขโค๊ดนี้ หรือสั่งพิมพ์!"><pre name="code" class="$codeclass">$code</pre></div></div>
<!--{/block}-->
<!--{eval return $return;}-->
<!--{eval
}1.3 เพิ่มปุ่มนำเข้าโค๊ด

1.3.1 เปิดไฟลล์ \templates\default\post_editor.htm
ค้นหา<script type="text/javascript">
lang['post_discuzcode_code'] = '{lang post_discuzcode_input_code}';
lang['post_discuzcode_quote'] = '{lang post_discuzcode_input_quote}';
lang['post_discuzcode_free'] = '{lang post_discuzcode_input_free}';
lang['post_discuzcode_hide'] = '{lang post_discuzcode_input_hide}';เพิ่มโค๊ดนี้ด้านล่างlang['post_discuzcode_csharp'] = '{lang post_discuzcode_input_csharp}';
lang['post_discuzcode_css'] = '{lang post_discuzcode_input_css}';
lang['post_discuzcode_cpp'] = '{lang post_discuzcode_input_cpp}';
lang['post_discuzcode_delphi'] = '{lang post_discuzcode_input_delphi}';
lang['post_discuzcode_java'] = '{lang post_discuzcode_input_java}';
lang['post_discuzcode_javascript'] = '{lang post_discuzcode_input_javascript}';
lang['post_discuzcode_php'] = '{lang post_discuzcode_input_php}';
lang['post_discuzcode_python'] = '{lang post_discuzcode_input_python}';
lang['post_discuzcode_ruby'] = '{lang post_discuzcode_input_ruby}';
lang['post_discuzcode_sql'] = '{lang post_discuzcode_input_sql}';
lang['post_discuzcode_vb'] = '{lang post_discuzcode_input_vb}';
lang['post_discuzcode_xml'] = '{lang post_discuzcode_input_xml}';
lang['post_discuzcode_html'] = '{lang post_discuzcode_input_html}';1.3.2 ค้นหา<!--{if $forum['allowbbcode'] && $allowcusbbcode}-->
                                                <!--{eval $cusnum=0;}-->
                                                <!--{loop $_DCACHE['bbcodes_display'] $tag $bbcode}-->
                                                <td><a id="{$editorid}_cmd_custom{$bbcode}_$tag"><img src="images/common/$bbcode" title="$bbcode" alt="$tag" /></a></td><!--{if in_array($cusnum++, array(5, 25))}--></tr></table><table summary="Editor ToolBar" cellpadding="0" cellspacing="0" id="{$editorid}_morebuttons{if $cusnum == 6}1{else}2{/if}" {if !$advanceeditor}style="display: none"{/if}><tr><!--{/if}-->
                                                <!--{/loop}-->
                                        <!--{/if}-->
                                        </tr>เพิ่มโค๊ดนี้ด้านล่าง<!--Code Syntax Highlighter Star BY www.ppps.cn-->
                  <tr>
                                                <td><a id="{$editorid}_cmd_html"><img src="plugins/CSH/Button/bb_HTML.gif" title="{lang post_discuzcode_input_html}" alt="{lang post_discuzcode_input_html}" /></a></td>
                                                <td><a id="{$editorid}_cmd_xml"><img src="plugins/CSH/Button/bb_XML.gif" title="{lang post_discuzcode_input_xml}" alt="{lang post_discuzcode_input_xml}" /></a></td>
                                                <td><a id="{$editorid}_cmd_css"><img src="plugins/CSH/Button/bb_CSS.gif" title="{lang post_discuzcode_input_css}" alt="{lang post_discuzcode_input_css}" /></a></td>
                                                <td><a id="{$editorid}_cmd_javascript"><img src="plugins/CSH/Button/bb_JS.gif" title="{lang post_discuzcode_input_javascript}" alt="{lang post_discuzcode_input_javascript}" /></a></td>
                                                <td><a id="{$editorid}_cmd_php"><img src="plugins/CSH/Button/bb_PHP.gif" title="{lang post_discuzcode_input_php}" alt="{lang post_discuzcode_input_php}" /></a></td>
                                                <td><a id="{$editorid}_cmd_sql"><img src="plugins/CSH/Button/bb_SQL.gif" title="{lang post_discuzcode_input_sql}" alt="{lang post_discuzcode_input_sql}" /></a></td>
                                                <td><a id="{$editorid}_cmd_csharp"><img src="plugins/CSH/Button/bb_Csharp.gif" title="{lang post_discuzcode_input_csharp}" alt="{lang post_discuzcode_input_csharp}" /></a></td>
                                                <td><a id="{$editorid}_cmd_cpp"><img src="plugins/CSH/Button/bb_Cpp.gif" title="{lang post_discuzcode_input_cpp}" alt="{lang post_discuzcode_input_cpp}" /></a></td>
                                                <td><a id="{$editorid}_cmd_delphi"><img src="plugins/CSH/Button/bb_Delphi.gif" title="{lang post_discuzcode_input_delphi}" alt="{lang post_discuzcode_input_delphi}" /></a></td>
                                                <td><a id="{$editorid}_cmd_java"><img src="plugins/CSH/Button/bb_Java.gif" title="{lang post_discuzcode_input_java}" alt="{lang post_discuzcode_input_java}" /></a></td>
                                                <td><a id="{$editorid}_cmd_python"><img src="plugins/CSH/Button/bb_Python.gif" title="{lang post_discuzcode_input_python}" alt="{lang post_discuzcode_input_python}" /></a></td>
                                                <td><a id="{$editorid}_cmd_ruby"><img src="plugins/CSH/Button/bb_Ruby.gif" title="{lang post_discuzcode_input_ruby}" alt="{lang post_discuzcode_input_ruby}" /></a></td>
                                                <td><a id="{$editorid}_cmd_vb"><img src="plugins/CSH/Button/bb_VB.gif" title="{lang post_discuzcode_input_vb}" alt="{lang post_discuzcode_input_vb}" /></a></td>
                  </tr>
                  <!--Code Syntax Highlighter End BY www.ppps.cn-->Step 2

2.1 เปิดไฟลล์ \include\javascript\editor.js

2.1.1 ค้นหาinsertText(text, strlen(opentag), strlen(closetag), in_array(tagname, ['code', 'quote', 'free', 'hide']) ? true : false);เปลี่ยนเป็นinsertText(text, strlen(opentag), strlen(closetag), in_array(tagname, ['code', 'quote', 'free', 'hide', 'html', 'xml', 'css', 'javascript', 'php', 'sql', 'csharp', 'cpp', 'delphi', 'java', 'python', 'ruby', 'vb']) ? true : false);2.1.2 ค้นหาif(in_array(cmd, ['quote', 'code', 'free', 'hide'])) {เปลี่ยนเป็นif(in_array(cmd, ['quote', 'code', 'free', 'hide', 'html', 'xml', 'css', 'javascript', 'php', 'sql', 'csharp', 'cpp', 'delphi', 'java', 'python', 'ruby', 'vb'])) {2.2 เปิดไฟลล์ discuzcode.func.php

2.2.1 ค้นหาfunction codedisp($code) {
        global $discuzcodes;
        $discuzcodes['pcodecount']++;
        $code = htmlspecialchars(str_replace('\\"', '"', preg_replace("/^[\n\r]*(.+?)[\n\r]*$/is", "\\1", $code)));
        $discuzcodes['codehtml'][$discuzcodes['pcodecount']] = tpl_codedisp($discuzcodes, $code);
        $discuzcodes['codecount']++;
        return "[\tDISCUZ_CODE_$discuzcodes\t]";
}เพิ่มโค๊ดนี้ด้านบน//Code Syntax Highlighter Star BY www.ppps.cn
function syntaxhighlighter($code,$codeclass) {
      global $discuzcodes;
      $discuzcodes['pcodecount']++;
      $codeclass = $codeclass == 'csharp' ? 'c-sharp' : $codeclass;
      $codename = $codeclass == 'code' ? '' : $codeclass;
      $code = htmlspecialchars(str_replace('\\"', '"', preg_replace("/^[\n\r]*(.+?)[\n\r]*$/is", "\\1", $code)));
      $discuzcodes['codehtml'][$discuzcodes['pcodecount']] =tpl_codecsh($discuzcodes,$codeclass, $codename, $code);
      $discuzcodes['codecount']++;
      return "[\tDISCUZ_CODE_$discuzcodes\t]";
}2.2.2 ค้นหาif($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/code\]\s*/ies", "codedisp('\\1')", $message);
      }เปลี่ยนเป็น//Code Syntax Highlighter Star BY www.ppps.cn
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/code\]\s*/ies", "syntaxhighlighter('\\1','code')", $message);
      }

      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/csharp\]\s*/ies", "syntaxhighlighter('\\1','csharp')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/css\]\s*/ies", "syntaxhighlighter('\\1','css')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/cpp\]\s*/ies", "syntaxhighlighter('\\1','cpp')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/delphi\]\s*/ies", "syntaxhighlighter('\\1','delphi')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/java\]\s*/ies", "syntaxhighlighter('\\1','java')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/javascript\]\s*/ies", "syntaxhighlighter('\\1','javascript')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/php\]\s*/ies", "syntaxhighlighter('\\1','php')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/python\]\s*/ies", "syntaxhighlighter('\\1','python')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/ruby\]\s*/ies", "syntaxhighlighter('\\1','ruby')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/sql\]\s*/ies", "syntaxhighlighter('\\1','sql')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/vb\]\s*/ies", "syntaxhighlighter('\\1','vb')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/html\]\s*/ies", "syntaxhighlighter('\\1','html')", $message);
      }
      if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
                $message = preg_replace("/\s*\(.+?)\[\/xml\]\s*/ies", "syntaxhighlighter('\\1','xml')", $message);
      }
//Code Syntax Highlighter Star BY www.ppps.cn2.3 JS&CSS

2.3.1 เปิดไฟลล์ \templates\default\footer.htm

ค้นหา</body></html>เพิ่มโค๊ดนี้ด้านบน<script class="javascript" src="plugins/CSH/Scripts/shCore.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushCode.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushJava.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushVb.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushSql.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushXml.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushPython.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushCss.js"></script>
<script class="javascript" src="plugins/CSH/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'plugins/CSH/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>2.3.2 เปิดไฟลล์ \templates\default\css.htm

เพิ่มโค๊ดนี้ด้านล่างสุด/*Coloring code*/
.dp-highlighter{font-family:"consolas","courier new",courier,mono,serif; font-size:12px; background-color:#f1f8fe; width:99%; overflow:auto; margin:0; padding-top:1px;}
.dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span{margin:0; padding:0; border:none;}
.dp-highlighter a, .dp-highlighter a:hover{background:none; border:none; padding:0; margin:0;}
.dp-highlighter .bar{padding-left:45px;}
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar{padding-left:0px;}
.dp-highlighter ol{list-style:decimal; background-color:#fff; margin:0px 0px 1px 45px !important; padding:0px; color:#5C5C5C;}
.dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li{list-style:none !important; margin-left:0px !important;}
.dp-highlighter ol li, .dp-highlighter .columns div{list-style:decimal-leading-zero;
list-style-position:outside !important; border-left:3px solid #CAD9EA; background-color:#F8F8F8; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:16px;}
.dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div{border:0;}
.dp-highlighter .columns{background-color:#F8F8F8; color:gray; overflow:hidden; width:100%;}
.dp-highlighter .columns div{padding-bottom:5px;}
.dp-highlighter ol li.alt{background-color:#FFF; color:inherit;}
.dp-highlighter ol li span{color:black; background-color:inherit;}
.dp-highlighter.collapsed ol{margin:0px;}
.dp-highlighter.collapsed ol li{display:none;}
.dp-highlighter.printing{border:none;}
.dp-highlighter.printing .tools{display:none !important;}
.dp-highlighter.printing li{display:list-item !important;}
.dp-highlighter .tools{padding:3px 8px 3px 10px; font:9px Verdana,Geneva,Arial,Helvetica,sans-serif; color:silver; background-color:#f8f8f8; padding-bottom:10px; border-left:3px solid #CAD9EA;}
.dp-highlighter.nogutter .tools{border-left:0;}
.dp-highlighter.collapsed .tools{border-bottom:0;}
.dp-highlighter .tools a{font-size:9px; color:#a0a0a0; background-color:inherit; text-decoration:none; margin-right:10px;}
.dp-highlighter .tools a:hover{color:red; background-color:inherit; text-decoration:underline;}
.dp-about{background-color:#fff; color:#333; margin:0px; padding:0px;}
.dp-about table{width:100%; height:100%; font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important;}
.dp-about td{padding:10px; vertical-align:top;}
.dp-about .copy{border-bottom:1px solid #ACA899; height:95%;}
.dp-about .title{color:red; background-color:inherit; font-weight:bold;}
.dp-about .para{margin:0 0 4px 0;}
.dp-about .footer{background-color:#ECEADB; color:#333; border-top:1px solid #fff; text-align:right;}
.dp-about .close{font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important; background-color:#ECEADB; color:#333; width:60px; height:22px;}
.dp-highlighter .comment,.dp-highlighter .comments{color:#008200; background-color:inherit;}
.dp-highlighter .string{color:blue; background-color:inherit;}
.dp-highlighter .keyword{color:#069; font-weight:bold; background-color:inherit;}
.dp-highlighter .preprocessor{color:gray; background-color:inherit;}สุดท้าย : อัพโหลดโฟเดอร์ CSH ไปวางไว้ที่โฟเดอร์ plugins

ท้ายสุด : อัพเดทแคชและใช้งานครับ

mastergtx โพสต์ 2008-2-22 18:59:29

~~ เยี่ยมจริงๆ ครับ ขอบคุณมากมายที่แบ่งปัน

powermacc โพสต์ 2008-2-22 21:29:59

งงจังมันคืออะไรเนี่ย

DarkEagle โพสต์ 2008-2-22 22:15:48

ต้นฉบับโพสโดย powermacc เมื่อ 2008-2-22 21:29 http://www.cazdesign.com/forums/images/common/back.gif
งงจังมันคืออะไรเนี่ย
มันคือตัวแยกโค้ดสี เพื่อให้ดูง่ายไงครับ แต่อันนี้ จะแยกสีได้หลายภาษาเลย ตามที่เค้าบอก ว่ามีภาษาของโปรแกรมอะไรบ้าง เพื่อที่จะทำให้เข้าใจในการอ่านมากขึ้นจ้า

buachompoox โพสต์ 2008-2-23 00:42:49

โอวมานยอดมาก ทดสอบแล้วใช้รวมกับ php code ที่ก่อนหน้านี้แสดงผลได้สมบูรณ งับ











LIVEDEMO : http://buachompoox.powermacc.com/thread-160-1-1.html

สำหรับคนที่จะลองเทสนะครับ

[ แก้ไขล่าสุด buachompoox เมื่อ 2008-2-23 01:19 ]

kunimi โพสต์ 2008-2-23 13:04:36

แก้โค๊ด เยอะจริงๆเลยครับตาลายแทน อิอิ

yardsoul โพสต์ 2008-2-23 18:02:52

สุดยอดมากครับชอบสุดๆแต่ไม่มีเว็ปเกี่ยวกับโค้ดให้ใช้แฮะไม่รู้จะทำไปทำไม~(22)~

buachompoox โพสต์ 2008-3-24 21:26:24

สำหรับคนที่ใช้งาน ปลั้กอินตัวนี้แนะนำให้ปิดระบบคำค้น(TAG) เพราะเวลาข้อความด้านในโค้ดไปตรงกับ คำค้น(TAG)เข้ามาจะบัคเป็นโค้ด <span> ครับ แจ้งมาเพื่อทราบสำหรับผู้ที่จะใช้งานจ้า :victory:

nathawat โพสต์ 2008-4-30 18:06:16

จะเอาลองไปทำดูนะครับ

nathawat โพสต์ 2008-5-2 03:09:21

จะลองเอาไปทำดูนะครับ

ดูในรูปแบบกติ: CodeSyntaxHighlighter?For Discuz 6.0.0