FUN 攝影 Kerwin 的野兔部落

在上一篇發了好用的畫重點底線CSS，這次來簡單說明一下利用CSS來貼CODE碼的方式
/*--程式碼--*/
.CODE {
   display: block; /* fixes a strange ie margin bug */
   font-family: Courier New;
   font-size: 8pt;
   color: #060;
   white-space: pre ;
   overflow:auto;
   background: #f0f0f0 url(自訂側邊圖檔位址) left top repeat-y;
   border: 1px solid #ccc;
   padding: 10px 5px 10px 21px;
   max-height:800px;
   letter-spacing: 0em;
   line-height: 0.8em;
   margin: 0 auto;
   width:92% ;
            }
上述的CSS內容其中要特別說明的是white-space這個屬性
white-space有三種屬性可以設定
1、預設值normal：
會把空白、Tab或是換行都替換成一個半形的空白，並且文章太長時而超出區塊範圍的話，也會自動換行；

2、nowrap：
一樣會把空白、Tab或是換行都替換成一個半形的空白，這是讓文章過長也不會自動換行的屬性 ；

3、pre：
會正常顯示出空白、Tab與換行的樣式

側邊圖檔位址就把做好的圖放上去(圖檔範例：點我看圖檔)

前一篇有說明我的CSS是利用外連的方式將<link rel="stylesheet" href="http://網路位址/CODE.css">這串加在公告區，並到後台管理把公告區塊功能打開

使用語法為<span class="CODE">程式碼</span>即可顯示出來！

另外還可以衍生出其它的功能，像是引用、碎碎唸、優‧回應…等等，只要再新增CSS上去就可以了，下面就簡單示範一下，另外看一下"優‧回應"的CSS

引用範例：
引用上一篇的CSS延伸
來達到顯示CODE碼的方式

碎碎唸範例：
自言自語，啦啦啦

優‧回應範例：
我是最優質的回應唷！

優‧回應的CSS語法：
/*--回應--*/
    .SAY {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    font-size: 8pt;
    overflow:auto;
    background: #EEFFEE url(圖檔位址) left top repeat-y;
    border: 1px solid #339933;
    padding: 10px 10px 10px 21px;
    max-height:200px;
    line-height: 1.2em;
    margin: 0 auto;
    width:380px ;
}
有沒有發回應的區塊是置中的，這是因為  margin: 屬性的關係
  margin: 上 右 下 左
右跟左設為auto，就可以達到置中的呈現方式了！

在痞客邦要用這方法發文要使用純文字模式來加入語法，然後不要讓系統自動換行，這樣才能正常顯示

上述的方法完全用不到 javascript ，是個很簡單的呈現方法
因為野兔只是寫個BLOG，能簡單一點就簡單一點
方便就好，哈~

dllee :
BSP 編輯器本身不支持貼程式碼時,
就很麻煩, 一不小心, 設錯模式, 格式就會全部跑掉,
天空/痞客應該都一樣, 有使用 code/pre 的,
用了進階編輯器再編輯, code/pre 就會變成單一超長文字...