JDP 發表於 2007-11-6 16:30:15

Discuz 6.0 代碼語法解析高亮

1.首先到 http://code.google.com/p/syntaxhighlighter/ 下載 SyntaxHighlighter
2.將 SyntaxHighlighter 解壓縮(含目錄)到 discuz\attachments
3.修改\discuz\attachments\dp.SyntaxHighlighter\Scripts\shCore.js (解決複製到剪貼簿時, 空白會變成一堆 )
找到        CopyToClipboard: {
                label: 'copy to clipboard',
                check: function() { return window.clipboardData != null || dp.sh.ClipboardSwf != null; },
                func: function(sender, highlighter)
                {
                        var code = dp.sh.Utils.FixForBlogger(highlighter.originalCode)
                                .replace(/&lt;/g,'<')
                                .replace(/&gt;/g,'>')
                                .replace(/&amp;amp;/g,'&')後面加上                                .replace(/&amp;nbsp;/g,' ')4.修改\discuz\viewthread.php (加入 SyntaxHighlighter 解析, 並且解決Discuz自動在換行時加上<br />的問題)
最前面加上
<link type="text/css" rel="stylesheet" href="attachments/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
最後面加上
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="attachments/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></script>
<script class='javascript'>   
    function FindTagsByName(container, name, Tag)   
    {   
      var elements = document.getElementsByTagName(Tag);   
      for (var i = 0; i < elements.length; i++)   
      {   
            if (elements.getAttribute("name") == name)   
            {   
                container.push(elements);   
            }   
      }   
    }   
    var elements = [];   
    FindTagsByName(elements, "theCode", "textarea");   
   
for(var i=0; i < elements.length; i++) {   
if(elements.nodeName.toUpperCase() == "TEXTAREA") {   
   var childNode = elements.childNodes;   
   var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,''));   
   elements.replaceChild(newNode, childNode);   
}   
}   
dp.SyntaxHighlighter.HighlightAll("theCode");
</script>

5.進入discuz後端管理介面 => 上方"帖子管理" => 左邊"帖子相關"裡的"Discuz!代碼" => 加入 "csharp" => "提交"
選csharp右邊的"[詳情]" => 替換內容加入<textarea name="theCode" class="csharp" cols="60" rows="10">{1}</textarea>6.重覆步驟5 將csharp,css,cpp,delphi,java,javascript,php,python,ruby,sql,vb,xml加入
7.discuz後端管理介面 => 上方"系統工具" => 左邊"Discuz!工具"裡的"更新緩存" 即可!
8.在文章內容使用 [ csharp ] 及 [ /csharp ] 即可! ([]中無空格)

Reference:
1. http://discuz.bluelovers.net/redirect.php?goto=newpost&tid=1411
2. http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html

JDP 發表於 2007-11-7 09:37:43

SyntaxHighlighter 更改字型及修正工具列CSS

1.開啟 dp.SyntaxHighlighter\Styles\SyntaxHighlighter.css
2.更改字型：
找到
.dp-highlighter
{
        font-family: "Consolas", "Courier New", Courier, mono, serif;
        font-size: 12px;
        background-color: #E7E5DC;
        width: 99%;
        overflow: auto;
        margin: 18px 0 18px 0 !important;
        padding-top: 1px; /* adds a little border on top when controls are hidden */
}
將 font-size: 改為所需要的字體大小

3.修正工具列CSS：
找到
.dp-highlighter a,
.dp-highlighter a:hover
{
        background: none;
        border: none;
        padding: 0;
        margin: 0;
}
改為
/*
.dp-highlighter a,
.dp-highlighter a:hover
{
        background: none;
        border: none;
        padding: 0;
        margin: 0;
}
*/
頁: [1]
查看完整版本: Discuz 6.0 代碼語法解析高亮