2013年7月24日 星期三

程式碼上色 - Code Block and Google Code Prettify


步驟1：引用相關檔案

下面這段程式碼可以放在 </head> 之前，也可以放在 <body> 的內文裡面： 
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>

<style>
.codeblock { 
 display: block; /* fixes a strange ie margin bug */
 font-family: Courier New; 
 font-size: 10pt; 
 overflow:auto; 
 background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 line-height: 1.2em;
}
</style>
如果是 Google 的 blogger ，可以去"範本" > "編輯HTML"的功能，把 .codeblock 那一段寫在這裡。有篇文章說要寫在 .post { 後面，但是我找不到這個標籤，所以我是寫在 .post-body { 後面。
.post-body {
  position: relative;
}
.post .codeblock  {
  //codeblock的內容
}
捲軸功能只有在 Firefox 有效。在 Chrome 跟 IE 都不會出現捲軸。

步驟2：處理要顯示的程式碼

編輯文章時，切換到 html 模式，並把下面這段貼上： 
<pre class="codeblock prettyprint">
&lt;?php
    for($i=0; $i&lt;10; $i++){
     $i++;
    }
?&gt;
</pre>
pre 那兩行不要動，裡面的內容是要顯示的程式碼。角括號要轉換。
轉換特殊字元： 這個網站可以幫我們把程式碼的 < 跟 > 符號轉換成 &lt; 跟 &gt;

步驟3：呼叫函數

prettyPrint(); 可以放在 body 裡面 
<body onlooad="prettyPrint();"
或是放在要引用的段落後面 
<script>
prettyPrint();
</script>

參考文章
在網頁中嵌入顯示程式碼：Google Code Prettify
張貼者： 於

1 則留言:

訂閱： 張貼留言 (Atom)