CookieFactory: 我也想要有專業的 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='"loading" + data:blog.mobileClass'>

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

<body expr:class='"loading" + 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'/>


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


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

CookieFactory

Sunday, September 26, 2010

我也想要有專業的 Code Block

1 comment: