2008年10月14日 星期二

對Blog中的程式碼做色彩強調

1. 修改HTML範本

到版面配置->修改HTML->修改範本
找到

code {
color: #996666;
}

以下面的html code覆蓋貼上

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.c{
font-size: 9pt;
color: #000;
background: #ccc url(http://sites.google.com/site/chihengchou/Home/blogsource/BG_CODE.gif) left top repeat-y;
}
code.cmd {
font-size: 9pt;
color: #ccc;
background: #000 url(http://sites.google.com/site/chihengchou/Home/blogsource/BG_SHELL.gif) left top repeat-y;
}
code.html{
font-size: 9pt;
color: blue;
background: #FFF url(http://sites.google.com/site/chihengchou/Home/blogsource/BG_HTML.gif) left top repeat-y;
}
code.file{
font-family: 'Georgia';
font-size: 9pt;
color: #000;
background: #FFF url(http://sites.google.com/site/chihengchou/Home/blogsource/BG_FILE.gif) left top repeat-y;
}

儲存為範本

2. 使用方式


在張貼新文章時,使用修改Html,在要寫入的內容用下列符號括弧起來即可

<code class="c"> c code </code>
<code class="cmd"> shell command </code>
<code class="html"> html code </code>
<code class="file"> file </code>


3. 如果在文章中有下列字型時,需要更換


  • < 用&lt;更換
  • > 用&gt;更換
  • & 用&amp;更換

4. 備註



這些背景以及設定都是從網路上蒐集來的,由於原始背景的圖已經失連,所以我自己重做了四個放在我的google site

Ref:
如何在文章裡顯示程式碼的語法
【Blog】文章中引用程式碼的作法

沒有留言: