使用 google-code-prettify 在部落格加亮程式碼

最近想po一些跟developing有關的文章，在部落格需要用到程式碼加亮功能。
發現google-code-prettify這個解決方案不錯~

google-code-prettify : syntax highlighting of code snippets in a web page :
https://code.google.com/p/google-code-prettify/wiki/GettingStarted


Cookys提供了一個綜合的解決方法好用，留個紀錄免得換主題重設忘記!
http://blog.cookys.net/2012/10/blogger-google-code-prettify.html

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

pre.code {
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

只要範本裡編輯html，貼上對應程式碼即可，十分容易。

使用時加上這行即可

<pre class="code prettyprint linenums lang-c"> "你想加亮的程式碼"  </pre>

linenums : 加上行數字
lang-XX : 使用XX語言加亮



以下是小小測試 :

#include 
#include "EmpiricalModeDecomposition.h"
void imfs_output(emdData* emd){
        int i, j;
        for(j = 0; j < emd->size; j++){
                for(i = 0; i < emd->order; i++) {
                        printf("%f ", emd->imfs[i][j]);
                }
                printf("\n");
        }
}
int main(void){
        FILE *inputfile = fopen("sinusoid.txt","r");
        int i=0;
        float signal[1024]={0.0};
        emdData data;
        while (fscanf(inputfile, "%f", &signal[i]) != EOF){
                //printf("%d %f\n",i,signal[i]);
                i++;
        }
        emdCreate(&data,i,5,10,0); // problems here
        emdDecompose(&data,signal);
        imfs_output(&data);
        emdClear(&data);
        fclose(inputfile);
        return 0;
}

滿美觀漂亮的!
Good!


最後，有時候鬼打牆會一直出現亂碼~
這時候用這個網站(http://hilite.me)可以直接貼上code套色，也很方便!
或是用這個網站濾掉特定會誤判的字符 (http://www.elliotswan.com/postable/)。