【Blog】文章中引用程式碼的作法

因為我常常必需要在文章中引用程式碼,為了使在文章中的程式碼不至於太雜亂無章,所以我就對模版做了一些修改,讓在文章中引用的程式碼能夠以比較漂亮的型式出現,也讓文章比較容易被讀懂!

我的作法是參照[CSS] A Cool blockquote for "Code style" and some blogging tips at Kaie's Blog再加上我自己的修改某些css的欄位得來的!

以下所有的configuration就放在template的css部分即可!

首先,我先對所有的code做General的Configuration.

code {
display: block;
font-family: 'Courier New';
overflow: auto;
border: 1px solid #ccc;
padding: 1px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
margin: 5px 5px 0 15px;
}


這裡是對所有被< code> 和 </code >標籤所包起來的文字做一個General的設定!接下來才是對每一種class有不同的設定!讓我們一個一個來!


  • Programming Code 設定如下:

  • code.c{
    font-size: 9pt;
    color: #000;
    background: #ccc url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_CODE.gif) left top repeat-y;
    }


    如此一來,就會表示成下列的狀況:

    int main()
    {
      cout<< "Hello the world"; }


  • Command Line 設定如下:

  • code.cmd {
    font-size: 9pt;
    color: #ccc;
    background: #000 url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_CMD.gif) left top repeat-y;
    }

    表現出來的效果如下:

    login as: synn
    synn@140.114.79.227's password: ******
    Last login: Wed Nov 8 16:30:28 2006 from alpha25.cs.nthu.edu.tw
    [synn@alpha27 ~]$ ls
    Desktop joe-3.3 splitter_placement_03_00
    Find_Path joe-3.3.tar.gz splitter_placement.cpp
    [synn@alpha27 ~]$

  • Latex Code
  • 這是我寫論文常常要用到的一種code,所以我也把他特別寫出來!設定如下:

    code.latex{
    font-size: 9pt;
    color: #660000;
    background: #CCFFF url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_LATEX.gif) left top repeat-y;
    }

    效果就會像下面一樣:

    \begin{thebibliography}{1}
    \bibitem{gare79}
    M. R. Gare and D. S. Johnson,
    \newblock {\em Computers and Intractability},
    \newblock San Francisco, CA: Freeman, 1979.

    \end{thebibliography}

  • HTML or CSS Code 設定如下:

  • code.html{
    font-size: 9pt;
    color: blue;
    background: #FFF url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_HTML.gif) left top repeat-y;
    }

    表現出來的就和設定表現出來的一樣。不過在貼HTML code時要注意一下,括號會被browser當作tag讀掉,所以如果要貼括號的話,要用下列的字元更換!

    1. < 用 &lt; 更換
    2. > 用 &gt;更換
    3. & 用 &amp;更換

  • File 設定如下:

  • code.file{
    font-family: 'Georgia';
    font-size: 9pt;
    color: #000;
    background: #FFF url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_FILE.gif) left top repeat-y;
    }

    表現出來的效果則是:

    #File name: IEEEtran.cls

    December 10, 2002

    This IEEEtran.cls is now the official LaTeX class for authors of the
    Institute of Electrical and Electronics Engineers (IEEE) transactions
    journals and conferences. IEEEtran.cls is mirrored within IEEE's site
    as well.


在使用的時候,就把要引用的部分用< code class="c"> 和< /code>、 < code class="cmd"> 和< /code>、< code class="html" > 和< /code>、< code class="latex"> 和< /code>、< code class="file"> 和< /code>包起來即可!

用以上的做法,就能讓文章中引用的程式碼更好讀也更清楚,對於常常在寫code(程式碼或是任何的語言),都有很大的幫助!

另外,有興趣使用背景圖的人也可以盡量拿去用,因為我也是拿人家的來改,在我放檔案的server沒有掛掉之前,我不會把那些背景圖拿掉,請放心!

在此再次感謝[CSS] A Cool blockquote for "Code style" and some blogging tips良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區的慷慨分享!


則Facebook留言:【建議使用Facebook系統留言】


則blogger留言:【使用Blogger系統留言(可匿名)】

. Elliot 提到...

這個作法真是很實用方便,Blog中的程式碼變得好看得多;不過如果再加上<pre>,就程式縮排上應該會更方便一些。

. Jinn 提到...

圖片我拿走囉...謝謝提供語法及圖檔!
感溫!^_^

. Forgot 提到...

想請問如果我要加上縮排那要怎麼用
我如果寫成
code class="c"
pre
程式碼
/pre
/code

降我用複製貼上的話,程式碼會變成一排
不是我想要的格式

【使用Blogger系統留言(可匿名)】


Related Posts Plugin for WordPress, Blogger...