Creative Commons License
發卡布洛 所有內容 採用
創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款授權.

雖然 Discuz! 本身就有顯示程式碼的功能,但介面的配置過於陽春,本篇將介紹如何在 Discuz! 中加入 SyntaxHighlighter 語法高亮度標記程式,加強程式碼顯示介面。

第一步
Syntaxhighlighter 官網下載這支程式

第二步
接著把程式解開,打開 Script 資料夾,只要選擇自己有用到的程式語言即可,例如你只會用到php、javascript、css、c++,就將shBrushPhp.js、shBrushJScript.js、shBrushCss.js、shBrushCpp.js裡的程式(不含註解)全部都整合到一個 codec.js 檔案中,這樣可大幅提升載入網頁的效率。修改完成後將這些檔案放在 "論壇根目錄\include\javascript\code\" 下面。
image031.jpg

第三步

打開 shCore.js 找到以下程式碼:

return(dp.sh.isBloggerMode==true)?str.replace(/<br\s*\/?>|&lt;br\s*\/?&gt;/gi,'\n'):str;}

 

將它替換為(解決換行問題):

return(dp.sh.isBloggerMode==true)?str.replace(/<br\s*\/?>|&lt;br\s*\/?&gt;/gi,''):str;}

 

第四步

打開 ”論壇根目錄\include\javascript\editor.js”

找到:

if(cmd != 'hide' && selection)

 

修改為:

if(cmd != 'hide' && cmd != 'code' && selection)

 

找到:

if(cmd != 'hide' || !selection)

 

修改為:

if(cmd != 'hide' || cmd != 'code' || !selection)

 

if(cmd == 'hide'){
        str += cmd == 'hide' && selection ? '' : '<br />';
        str += cmd == 'hide' ? '<input type="radio" name="' + ctrlid + '_radio" id="' + ctrlid + '_radio_1" checked="checked">只有當瀏覽者回復本帖時才顯示<br /><input type="radio" name="' + ctrlid + '_radio" id="' + ctrlid + '_radio_2">只有當瀏覽者積分高於 <input type="text" size="3" id="' + ctrlid + '_param_2"> 時才顯示' : '';
    }

下面,加入(依自己所需加入程式類型):

if(cmd == 'code'){
        str += cmd == 'code' && selection ? '' : '<br />';
        str += cmd == 'code' ? '<select id="' + ctrlid +'_param_2"><option value="c">c</option><optionvalue="css">css</option><optionvalue="java">java</option><optionvalue="js">js</option><optionvalue="php">php</option><optionvalue="sql">sql</option><optionvalue="xml">xml</option><optionvalue="vb">vb</option></select>' : '';
    }

第五步

打開 ”論壇根目錄\templates\default\javascript\viewthread.htm”

在</body>前加入:

<script language='javascript' src='include/javascript/code/shCore.js'></script>
<script language='javascript' src='include/javascript/code/codec.js'></script>
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'include/javascript/code/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

第六步

到後台 → 帖子管理 → 帖子相關 → Discuz! 代碼頁面
新增一個 codec 按鈕,替換內容如下所示:

<textarea name='code' class='{1}'>{2}</textarea>

其中參數{1}為程式碼類型,參數{2}為程式碼內容。

第七步

由於我們的方法是加入新的按鈕,舊有功能鈕並沒有取代掉,故我們要將舊有的功能鈕給隱藏起來,在 css.htm 模版中加入以下樣式表,即可將舊功能鈕設定為不顯示:

#posteditor_cmd_custom2_code{display:none}

完成後使用者在 PO 文時就可以選擇程式語言類型了~

syntax_result1.jpg

syntax_result2.jpg

bshadow 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 路人
  • 提問

    提問~
    如果是別人的論壇,想用js代碼要怎弄?
    有個「插入代碼」的東西,不過跑出來的語法是[code][/code]
    然後該怎辦?
  • 這個方法是提供給站長更改插件的步驟喔
    so~使用者是沒辦法套用的

    bshadow 於 2010/06/27 03:15 回覆

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消