2009/10/20

[HowTo] 幫blog加入SyntaxHighlighter,貼code更簡單

有時候會寫一些跟程式或網頁相關的東西,之前都是醜醜的直接將程式碼貼上,幾乎沒什麼做排版的動作。前兩天看了一下人家的blog文章,看到人家分享整整齊齊的程式碼,當下決定馬上也幫我的blog裝好套件。

其實早在一兩年前Google剛推出Google Prettify的時候,就有稍微看過,但是因為那個時候沒有可以讓我放檔案的host,所以就沒有安裝Google Prettify。這次除了Google Prettify之外,還找了另外一套很多人用的SyntaxHighlighter。跟Google Prettify比起來,SyntaxHighlighter比較漂亮,而且SyntaxHighlighter的作者相當佛心來的,還提供了外連服務,給沒有host放script files的使用者可以直接連到作者的網站去。只是缺點就是link的URL裡面有版本號,所以缺點就是當有新版本的時候,就要更新一次blog上的設定,當然如果想要繼續用舊版應該也是可以啦。

講了很多廢話,開始講設定吧。

  1. 從官網上下載檔案,解壓縮之後將scripts裡面的檔案傳到host,js檔不用全部都傳,只要傳你會用到的語言script就可以了。swf記得也要傳,這樣才會有一鍵複製程式碼的功能。styles裡面的png檔全部都要上傳,至於css就傳你會用到的那個template跟shCore.css就可以了,像我是只有傳Defaulte的css。src裡面的shCore.js跟shLegacy.js也一起上傳。
  2. 進到blogspot後台,選擇"Layout”->"Edit HTML”,找到</head>,在</head>的前面插入下面這段code,基本上就是你剛剛上傳的那些檔案。
    <SCRIPT src="scripts/shCore.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shLegacy.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushBash.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushCpp.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushCSharp.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushCss.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushDelphi.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushJava.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushJScript.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushPhp.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushPython.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushRuby.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="scripts/shBrushSql.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="shBrushVb.js" type="text/javascript"></SCRIPT>
    <SCRIPT src="shBrushXml.js" type="text/javascript"></SCRIPT>
    <LINK href="styles/shCore.css" type="text/css" rel="stylesheet" />
    <LINK href="shThemeDefault.css" type="text/css" rel="styleshee" />
    <SCRIPT type=text/javascript>
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
    </SCRIPT>


  3. 之後如果當你在貼程式碼的時候,就切換到html模式,用<pre class=”brush: xxx”></pre>的tag,把你的程式碼全部包起來,brush的地方視你所貼的程式碼而定,javascript的範例如下:要看brush對應的alias的話,可以到這個網頁去看。
    <pre class="brush: jscript">
    var test;
    </pre>




這樣就大功告成了,是不是很簡單呀,以後就可以在blog貼美美的source code了。

沒有留言:

張貼留言