到處蒐集免費有用的軟體、線上服務、小技巧……

banner 背景來源Flicker| 點閱次數:

[筆記]在文章裡顯示優質的程式碼區

有朋友問了這個問題,就做個筆記分享一下。

  1. 加上CSS
    CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; height:200px; // for IE6 line-height: 1.2em; }
  2. 在文章中將程式碼置於<code></code>區塊中即可,如:
    <code>.comment-body-author {<br /> margin:0;<br /> padding:0 0 0 20px;<br /> background-color:#C0C0C0;<br /> }</code>

    效果
    .comment-body-author {
    margin:0;
    padding:0 0 0 20px;
    background-color:#C0C0C0;
    }

38 留言:

Abin 提到...

謝謝您,國良先生
原來是利用自訂的 CSS 標籤、搭配外連的背景圖片,就可以做出有質感的程式碼 block,受教了!
順便報您的 bug ..:)
你回答我的作者回應,裡面那個"這篇網誌"的 Link 錯了喔,連結到不對的文章..
還好我有訂閱您的 Feed,有看到這一篇新文章... :p

Jinyao Lin 提到...

如此一來的確是漂亮很多。相當優質。
感謝您的分享。

Belen 提到...

今天才拜读了您的这篇文章,有点相见恨晚!今天刚花了不少时间,用textarea方式做了个在网页插入代码的功能,发现和您的有惊人相似的地方:http://dowellnow.blogspot.com/2006/11/blogger.html

不过看了您的这个效果,觉得自己的没用了,您这个更好用的。谢谢!

还有,您的这个网站是我学习的榜样啊!特别是标签云,是我梦寐以求的功能,等下找找又没教程,没有的话再请教

Belen 提到...

呵呵,折腾了一阵,发现用code样式要替换括号,只是适用输入部分代码

GG 提到...
作者已經移除這則留言。
GG 提到...
作者已經移除這則留言。
GG 提到...

同样是研究博客技术的网站,希望交换链接

网站名称:GG派
链接地址:http://ggpi.blogspot.com

柚祐 提到...

顯示很漂亮很好用,我收下了!

Elvis Huang 提到...

謝謝站長,這個超好用的,找了很久才找到原始網站~ 我夾去配囉!!!

小杜白雲 提到...

問一個笨問題:
第一段css要加在那裡?
隨便插在那兒都ok嗎?

匿名 提到...

站长,这样写下来只是形式上很好看,代码仍然是被运行的啊?!比如加入链接 link,能否给个解决方案?

國良先生 提到...

TO 樓上的”匿名”
這個方法只是形式上美觀而已,代碼不要被運行就是把<>替換成&lt; &gt; ,不然就是先用HTML Editor編輯再貼上。

國良先生 提到...

TO 小杜白雲
放在</head>之前即可。

L.C. Chien 提到...

請問有沒有辦法在 CSS 裡面直接設定文字預設的顏色。比方說我想要用藍色,現在就必須要回到程式碼的內容慢慢一個個選取並變更色彩。如果能在 CSS 內進行的設定的話,讓所有程式碼打出來就直接變色,應該會方便取多。先謝謝了~

國良先生 提到...

TO L.C. Chien
如果你是想要和步驟1一樣關鍵字會變顏色,display紅色block藍色,現在的CSS還做不到這種效果。
你可以利用線上工具如「http://www.manoli.net/csharpformat/」並配合該網站提供的CSS來做到這種效果。

北大武山下的紫蜻蜓[[呆咪]] 提到...
作者已經移除這則留言。
北大武山下的紫蜻蜓[[呆咪]] 提到...

國良先生
謝謝你簡易清晰的教學喔
我也學會了
不過是用在 南極星童軍團裡頭的網站
謝謝你的分享

Idle 提到...

請問要把程式碼貼到哪邊呢??
不好意思,我不太懂程式語言...
是在「範本」裡面的「修改html」任意處嗎...(汗

國良先生 提到...

TO Idle
1.CSS部份是要加在「範本\修改html」
2.則是在你的文章中加上<code>程式碼</code>

Idle 提到...

唔,好像誤會我的意思了Q口Q
我的意思是要放在<head>之前、之內
爾或是<body>之內...?
我只知道<code></code>是要打在文章內....
剛剛試了放在<head>之前,結果在文章加上code後,首頁上方出現了一排程式碼 = =a

菜籃一族 提到...

你好:
如果程式碼過長,IE無法出現垂直捲軸,請問有辦法克服嗎?

國良先生 提到...

TO 菜籃一族
我用IE7看你的「自製即時報價網頁 」程式碼有出現垂直捲軸,如圖http://img72.imageshack.us/img72/285/snap1fd2.png

菜籃一族 提到...

看來是IE6的問題,我還是一直使用IE6,謝謝你!

國良先生 提到...

TO 菜籃一族
IE6 不支援 max-height
可以再加上 height:200px; 就有垂直捲軸

菜籃一族 提到...

加上height:200px; 搞定!
謝謝!

CQ.1 提到...

我試了這段碼,不過碰到一個問題耶

height:100px; // for IE6

不加這行的話
Fx2 完全正常,IE7 錯亂

加了這行
Fx2 和 IE7 顯示都變很長
不會根據行數自行變化耶....

olive 提到...

謝謝國良先生!我找這個語法找了一段時間呢!
今天在逛論壇剛好看到這篇文章被推薦,所以就來這裡看了。
真是太感謝你了!!
我看國外的網站都已經是這樣編輯,所以一直尋找這樣的語法。^^

通達人 提到...

先謝謝你提供的文章,非常有幫助。但是在使用上有個我一直困擾我且無法解決的問題,就是在第一行都會退行,請見:
http://prudentman.blogspot.com/2008/02/red-hat-50pidgin.html

因為我是直接貼在一段文字的前後,是不是我的用法錯了?還是說一定得用<br />的方式在文章內來換行?

無論無如,很謝謝你的文章!

國良先生 提到...

TO 通達人

在CSS中把 .post 的「text-indent:10px;」刪掉即可。

通達人 提到...

不好意思,再請教一個相關的問題。
在這個<code>內,是不是不能用<ul>或是<ol>來作編號或是符號呢?如果想要這麼改,要在那裏作修改呢?謝謝您的熱心回答!

國良先生 提到...

TO 通達人
可以啊,請參考此圖
http://img401.imageshack.us/img401/1480/snap043mo2.png

通達人 提到...

國良先生,但我試出來的情況就像下面的情況:
http://prudentman.blogspot.com/2007/11/pidginskype.html
我本來以為是因為<span id="fullpost">的問題,但是我移除後還是一樣。
真的不好意思,讓你一直回答我的疑問,我在想我需不需要把blogger的範本給你參考?再次謝謝。

國良先生 提到...

TO 通達人
http://img364.imageshack.us/img364/4134/snap044ta8.png
從上圖中可以看到,<reference></reference>中間是空的並沒有包含到<li>。

通達人 提到...

國良先生,謝謝你這麼快就回覆了。
我是真的有放在<reference>和
</reference>之間啦,只是我真的不知道顯示出來的為啥會變?請看:
http://www.blogger.com/blog-this.g?t=&u=http%3A%2F%2Fklcintw4.blogspot.com%2F2006%2F11%2Fblog-post_03.html&n=%E8%89%AF%E4%BA%BA%E7%9A%84%E5%A4%A7%E7%A7%98%E5%AF%B6%3A%20%5B%E7%AD%86%E8%A8%98%5D%E5%9C%A8%E6%96%87%E7%AB%A0%E8%A3%A1%E9%A1%AF%E7%A4%BA%E5%84%AA%E8%B3%AA%E7%9A%84%E7%A8%8B%E5%BC%8F%E7%A2%BC%E5%8D%80

通達人 提到...

不好意思,再貼一下連結
http://picasaweb.google.com/jose.sun.tw/XklWQH/photo#5208647248607464674

國良先生 提到...

TO 通達人
經過測試,果然會發生你說的現象。
http://klcintw-test-2.blogspot.com/2008/06/test.html

目前避開的方法是改用<DIV class='code'>效果如:
http://klcintw-test-2.blogspot.com/2008/06/test2.html

程式碼如圖:http://img183.imageshack.us/img183/4554/snap045na2.png

通達人 提到...

謝謝國良先生。但在改過後:
http://picasaweb.google.com/jose.sun.tw/XklWQH/photo#5208710825075471906
結果仍然是不正確的:
http://prudentman.blogspot.com/2007/11/pidginmsn.html
真的是有點奇怪,即使把
<DIV class="CODE">換成
<DIV id="CODE">還是不行呢!
code換成CODE也是無法出現。

國良先生 提到...

TO 通達人
這是CSS的語法規定:
<DIV id="code"> 對應到 #code {}
<DIV class="code"> 對應到 .code {}
所以你要修改CSS如下圖,在CODE前加上#
http://img171.imageshack.us/img171/6503/snap046qq1.png