二月20

[部落] 利用CSS顯示CODE碼

2009年 02月20日 , 02:36

在上一篇發了好用的畫重點底線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 就會變成單一超長文字…



利用E-mail訂閱野兔最新的文章
輸入你的電子郵件地址: 發送者為 FeedBurner
本篇文章引用網址:

引用列表 (0)

留下迴響

放心, 您留下的電子郵件不會被公開或散佈。


野兔村 支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。


使用Facebook來留言
blank

无觅相关文章插件,快速提升流量