2008年7月5日 星期六

如何在blog顯示程式碼？

今天為了研究出要如何在blog中顯示程式碼，研究了快四小時，
網路是有很多資訊啦~
但是，都說要用到css語法，
那css的程式碼也沒有說要放哪裡？
最後，在其中一篇才知道要放在網路的某一個地方，
在由文章去讀取~
這對沒有學過css語法的我而言實在是一個頭兩個大~
連要怎麼用都不知道~

最後~最後~
終於讓我找到一個blog的方法非常簡單。
現在就我讓試試看吧~
你想說的話~

設定
1. 先上傳圖檔到Google Page
2. 先到blog個人首頁, 左上角「自定」->「板面配置」->「修改HTML」
3. 把底下程式碼的部分copy到</b:skin >的上方
4.
code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(http://superporter2001.googlepages.com/Code_BG.gif) left top repeat-y;
}
5. 接下來在編輯新文章時，只要在HTML編輯模式下用 <code >你想說的話~ </code >
6. 應該就可以看到上面的結果了
7. 另外,參考的文章是說跳到「所見即所得」的編輯模式就可以看到結果,但是,我的話要直接張貼才可以看到結果哩~
8. 因為有一些符號是程式碼的key word, 所以會被解讀成語法的一部份,因此要用其它符號取代
< 用 &lt; 更換
> 用 &gt;更換
&用 &amp;更換
半型的空白要用&nbsp;更換
藍色：<span style="color: rgb(51, 51, 255);">
紅色：<span style="color: rgb(255, 0, 0);">
橘色：<span style="color: rgb(255, 102, 0);">
海藍色：<span style="color: rgb(0, 204, 204);">
紫色：<span style="color: rgb(102, 0, 204);">
灰色：<span style="color: rgb(153, 153, 153);">
綠色：<span style="color: rgb(0, 153, 0);">
9. <ul> 可以顯示段落<\ul>
    可以顯示段落

10.在html中，若有多個空格會當作一個空格，對於把程式放上去對齊非常的麻煩，可以使用pre，但是tab仍當作一個空格，要注意！
<pre>
before
there are four space
after
</pre>
==================
before
    there are four space
after

11.<em>會變成灰色和斜體耶</em>
會變成灰色和斜體耶

12. 加入table
Table 的組成元件:
a. <table> </table>: 宣告表格
b. <caption> </caption>: 表格標題 (Optional)
c. <th> </th>: 表格欄位標題 (Optional)
d. <tr> </tr>: 表格列
e. <td> </td>: 表格欄 
<table border width=75%>
  <tr>
    <th rowspan=2></th><th colspan=3>部別</th>
  </tr>
  <tr>
    <th>四技</th><th>二技</th><th>研究所</th>
  </tr>
  <tr>
    <th>86學年度</th><td>400</td><td>208</td><td>10</td>
  </tr>
  <tr>
    <th>87學年度</th><td>400</td><td align=center>200</td><td align=right>15</td>
  </tr>
<caption align=bottom>A more complex table with row/column span, header, and caption.<caption>
</table>


結果顯示在下面













部別
四技二技研究所
86學年度40020810
87學年度40020015
A more complex table with row/column span, header, and caption.


13. <span style="font-style: italic; color: rgb(204, 204, 255);">灰色斜體</span>
灰色斜體
以上其實還有很多在HTML是特殊字元，若想要看取代的話，可以用framepage先在一般模式下打關鍵字，然後，再點HTML就可以看它會幫你轉換成什麼代碼囉~半型的空白我就是用這一個方法去找滴~

[2010.01.10 補充]
14. 設定使用的字型，同時設定字型大小
<span style="font-family: Consolas;font-size:130%;" >被套用的字</span>
其中把Consolas改成自己要使用的字型就可以啦~
然後，把130%改成原字幾倍大~

[主要參考資料]
Blogger Hack - 在文章中貼上程式碼code範例
Html語法教學
HTML語法字典

[參考資料 - 但沒有用到，因為，我不會CSS]
Blogger 顯示程式碼
【Blog】文章中引用程式碼的作法
用CSS顯示程式碼
如何在文章裡顯示程式碼的語法
本來以為是樣版的關係，但是，下面這一個blog跟我用一樣的，確可以用~所以，一定要成功~
True Colors
Html Pre
HTML Table
於

沒有留言:

張貼留言