作自己

　　剛才在弄貼程式碼的事情，沒辦法，我這個人就是比較龜毛，貼得醜醜的還不如不要貼。

　　這些關於 Javascript 的資料，都是從網路上找來的，這點不得不讓人歌頌網路的偉大，加速了知識的傳播與分享。至於後半段的修改，則是我自己依樣畫葫蘆改的，反正程式碼大多雷同，只要有原始碼，要舉一反三其實不難，作點小修改還是不成問題的。廢話不多說，先來看怎麼貼程式碼。

　　雖然搜尋 Online Syntax Highlight ，可以找到一大堆的資源，可惜的是，能同時具有標示顏色、顯示行數以及獨立背景的轉換並不好找，幸運的是，這款 SyntaxHighlighter 還不錯用，至於不符合自己風格的地方，只需要小修一下就可以了。

　　這款軟體的官網是 SyntaxHighlighter

　　下載完檔案之後，解壓縮並且上傳到自己的空間裡，順帶提一下，我用的是 3.0 版的。當然，除了自己上傳到空間並使用以外，也可以用官網提供的服務，只是，這不保證隨時可用，畢竟有著流量的限制存在。接下來，如果要在痞客邦使用的話，則需要作下列設定： 

　　側邊欄位設定 -> 頁尾 -> 設定

　　然後貼上下列程式碼：

<script type="text/javascript" src="http://.../scripts/shCore.js"></script>
<script type="text/javascript" src="http://.../scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="http://.../styles/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="http://.../styles/shThemeDefault.css" />
<script type="text/javascript">
SyntaxHighlighter.autoloader(
　　'c cpp                       http://.../scripts/shBrushCpp.js',
　　'js jscript javascript       http://.../scripts/shBrushJScript.js',
　　'c-sharp csharp              http://.../scripts/shBrushCSharp.js',
　　'css                         http://.../scripts/shBrushCss.js',
　　'sql                         http://.../scripts/shBrushSql.js',
　　'xml xhtml xslt html xhtml   http://.../scripts/shBrushXml.js'
);
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>

　　其中上面的程式碼中，路徑的部份需要稍作修改，換成自己上傳的檔案網址，至於怎麼換，可以打開資料夾下的檔案作確認，基本上，檔案的名稱沒什麼改變。  到了這一步之後，其實就大功告成了，不過，裡面的檔案其實沒有很多，如果之後要加什麼檔案進去的話，照上面的格式小修一下就行了，反正大致上就是縮寫，加上該檔案網址而已。

　　接下來要用時，只要在發表新文章的時候，以下列的格式貼上即可。不過要注意的是，內容可以要先經過 Html Encoder 先進行編碼才行，否則有些內容會無法顯示出來，像是括號或是箭頭之類的。這個的話，可以參考這個網址： Html Encoder

<pre class="brush: cpp">
/* This is Test */
int main(){
    int a;
    return 0;
}
</pre>

　　至於後半段的部分，則是講如何客製化的過程。簡單來說，我們習慣變數宣告的時候，資料形態的顯示為淡紫色，但是在原本的設定中，卻是呈現灰色的狀態，這點倒是讓人有點不太適應。關於這部分，想上網直接找，看看有沒有人有其他的設定檔可以直接套用，但很可惜的，很難找，所以只好反求諸己，看看裡面的檔案中，是不是可以稍作小修改即可奏效。事實上還不難修改，可以看看下面的說明。

　　接下來的例子，我們以修改 C++ 程式語言的顯示顏色為例：

　　首先觀察 shBrushCpp.js 這個檔案，找尋是否有出現 int 的地方，去觀察他怎麼定義，關於這個關鍵字的變色。可以觀察到，這裡把 int 這個字串，定義到屬於 datatypes 這個群集中。

        var datatypes =    'ATOM BOOL BOOLEAN BYTE CHAR COLORREF DWORD DWORDLONG DWORD_PTR ' +
                        ....
                        'char bool short int __int32 __int64 __int8 __int16 long float double __wchar_t ' +
                        ....
                        'va_list wchar_t wctrans_t wctype_t wint_t signed';

　　接下來，便是找尋在哪邊，定義了屬於 datatypes 這個群集的顏色，以方便我們作進一步的修改。結果在下面不遠的地方，能看到下列程式碼。這裡可以看到後面的選項中，出現 color1 以及 bold 這個選項，這代表著，只要是歸類在屬於 datatypes 的字串，都會以 color1 和 bold 的形式呈現，因此我們的下一步，便是去搜尋，哪裡定義了 color1 這個選項。

        this.regexList = [
            { regex: SyntaxHighlighter.regexLib.singleLineCComments,    css: 'comments' },            // one line comments
            { regex: SyntaxHighlighter.regexLib.multiLineCComments,        css: 'comments' },            // multiline comments
            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,        css: 'string' },            // strings
            { regex: SyntaxHighlighter.regexLib.singleQuotedString,        css: 'string' },            // strings
            { regex: /^ *#.*/gm,                                        css: 'preprocessor' },
            { regex: new RegExp(this.getKeywords(datatypes), 'gm'),        css: 'color1 bold' },
            { regex: new RegExp(this.getKeywords(functions), 'gm'),        css: 'functions bold' },
            { regex: new RegExp(this.getKeywords(keywords), 'gm'),        css: 'keyword bold' }
            ];

　　最後，我們可以在 shCoreDefault.css 這個檔案裡面，查到關於這個選項 color1 的定義。果然，在未作修改的情況下，原本資料形態的關鍵字顯示，就是為灰色的設定。

.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}

　　因此，想要將它改成其他顏色，只要改成該色碼就可以了。至於色碼的話，我是到這個網站查詢：Color-Cord

 　　到這邊為止，應該就有了修改初步的認識，接下來想寫其他語言，應該就是依樣畫葫蘆了。時間已晚，還是先去睡了！