Sunday, September 26, 2010

我也想要有專業的 Code Block

開始寫部落格之後就常常有需要貼一些程式碼,一開始我是直接用文字加上粗體,一下次就覺得很不專業 (謎之聲: 你本來就不是專業的),好吧,就算不是專業的,還是很希望看起來美美的,搜尋一下,順便將心得記錄起來給之後有需要的人參考。


第一個版本是使用 google-code-prettify ( http://code.google.com/p/google-code-prettify/ ),先在 "設計" -> 修改 HTML 在 <head> 之前插入


<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>


(發明 HTML 的人真厲害,會編輯的人也很厲害,我每次只要看到一堆 <> 頭就昏了)
 然後在 body 的地方加上

<body onload='prettyPrint()'>

沒學過 HTML 的人(像我),可能會被 template 中已經有一個 body 的區塊給迷惑,我的做法是一開始不理會,直接加上去,後面再跟上一個 </body> 變成二個 <body> 區塊(不知者的愚行 lol ),這樣做是可以用,但我很快就發現這麼做,每一段文字都會當做程式碼,都被自動的加上 <code> </code> 的慘烈後果, 正確的加法應該如下

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

在 body 區塊的中間空一格然後加進去即可

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='prettyPrint()'>

之後在修改文章的時候,進到 "修改HTML"在你的程式碼前後加上


<code class="prettyprint">

==> 程式碼

</code >


預覽時應該就會看到 Code Block 和 syntax highlight 了,最前面加上的 <link> 和 <script> 是直接連到 google-code-prettify 然後讀取放在 svn 上的 css 和 js 檔,理論上應該是將這二個檔存在自已部落格的 server 上,但我目前還不知道要怎麼做,只好先照著別人建議的方法,這一個版本是可以用的,但...看起來實在是不怎麼樣,心裡 OS 怎麼跟別人blog上的都不一樣 (謎之聲: 不會用當然不好看),休息一下,繼續朝美化的方向前進,可能是跟我的背景色有關?

Google 了一下後,發現 syntaxHighlighter ( http://alexgorbatchev.com/SyntaxHighlighter/ ) 也有很多人使用和推薦,結果看起來也不錯,參考了許多人的教學後,發現需要有一個網路空間來存放 java script 和 css 的檔案,所以也順便申請了一個 google site 來當作檔案的 hosting,沒架過網站,很多基本的東西都不知道,邊做邊學。

接下來也是需要去修改 blog 的 template 在 </body> 之前加入以下這落落長一大段的 script


<script src='https://sites.google.com/site/cookiefactoryblog/scripts/shCore.js' type='text/javascript'/>

<script src='https://sites.google.com/site/cookiefactoryblog/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cookiefactoryblog/scripts/shBrushPython.js' type='text/javascript'/>

<!-- begin of syntax highlighter -->
<script type='text/javascript'>
    (function(){
        var corecss = document.createElement(&#39;link&#39;);
        var themecss = document.createElement(&#39;link&#39;);
        var corecssurl = &quot;https://sites.google.com/site/cookiefactoryblog/styles/shCore.css&quot;;
        if ( corecss.setAttribute ) {
                corecss.setAttribute( &quot;rel&quot;, &quot;stylesheet&quot; );
                corecss.setAttribute( &quot;type&quot;, &quot;text/css&quot; );
                corecss.setAttribute( &quot;href&quot;, corecssurl );
        } else {
                corecss.rel = &quot;stylesheet&quot;;
                corecss.href = corecssurl;
        }
        document.getElementsByTagName(&quot;head&quot;)[0].appendChild(corecss);
        var themecssurl = &quot;https://sites.google.com/site/cookiefactoryblog/styles/shThemeDjango.css&quot;;
        if ( themecss.setAttribute ) {
                themecss.setAttribute( &quot;rel&quot;, &quot;stylesheet&quot; );
                themecss.setAttribute( &quot;type&quot;, &quot;text/css&quot; );
                themecss.setAttribute( &quot;href&quot;, themecssurl );
        } else {
                themecss.rel = &quot;stylesheet&quot;;
                themecss.href = themecssurl;
        }
        document.getElementsByTagName(&quot;head&quot;)[0].appendChild(themecss);
    })();
</script>
<!-- end of syntax highlighter -->

<script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;https://sites.google.com/site/cookiefactoryblog/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.config.strings.expandSource = &#39;show source&#39;;
    SyntaxHighlighter.config.strings.viewSource = &#39;view source&#39;;
    SyntaxHighlighter.config.strings.copyToClipboard = &#39;copy to clipboard&#39;;
    SyntaxHighlighter.config.strings.copyToClipboardConfirmation = &#39;The code is in your clipboard now&#39;;
    SyntaxHighlighter.config.strings.print = &#39;print&#39;;
    SyntaxHighlighter.config.strings.help = &#39;?&#39;;
    SyntaxHighlighter.config.strings.alert = &#39;SyntaxHighlighter\n\n&#39;;
    SyntaxHighlighter.config.strings.noBrush = &#39;Can\&#39;t find brush for: &#39;;
    SyntaxHighlighter.config.strings.brushNotHtmlScript = &#39;Brush wasn\&#39;t configured for html-script option: &#39;;
    SyntaxHighlighter.all();
</script>

試驗的結果是ok的,但好像 loading 變慢了?? (這之後再來修改)
測試一段程式碼如下

import maya.OpenMayaUI as mui
def getMayaWindow(): 

    # test code for syntax highlighter     
    # Get the maya main window as a QMainWindow instance 
 
    ptr = mui.MQtUtil.mainWindow()
    return sip.wrapinstance(long(ptr), QtCore.QObject)

    camTrans, cam = camera()
    cam.setFocalLength(100)
    fov = cam.getHorizontalFieldOfView()
    cam.dolly( -3 )  

設定完成!! 看起來還真是不錯,辛苦一下,以後貼程式碼就方便了 :D