在上一篇發了好用的畫重點底線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 就會變成單一超長文字...
/*--程式碼--*/
.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 就會變成單一超長文字...
全站熱搜
留言列表