2007/07/29

在教學文章中, 與眾不同你的程式碼




如果想在教學文章中, 在程式碼的區段, 加入一塊特別的底色, 怎麼做呢?

用三個步驟來變身!




記得改程式碼前, 要先備分template哦!

1. 請先下載此圖檔, 然後上傳到一個網頁空間... 記錄此圖片網址.(請記得下載, 最好把圖片另存, 萬一skyvee以後不小心砍掉可就麻煩囉!^^")

2. 將以下程式碼, 貼到 <head> </head>之間的CSS區塊,如 <b:skin><![CDATA[
的後面. 其中紅字部分, 要改成另外存的圖片網址哦!

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(圖片網址) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}


3. 以上步驟完成後, 只要在文章中, 想把有 程式碼 的那一段區域, 用特別的圖示標出, 就可以用 <code> </code> 包住那段程式碼囉!

效果就會像這篇文章中出現的程式碼一樣.

圖片下載網址

相關文章 :

25 comments:

Birdie 提到...

哇...
推出解說的速度真是神速...
感恩啊~

另外有兩個問題還是需要請教您
A. Google測試網站有推出全文搜尋的功能,但是我引用測試後,站內搜尋並沒有能夠像您的這樣可以正確運作(完全找不到對應的文章或回應...同時畫面呈現的方式也跟你不一樣)

B. Google部落格他有支援文章分類的功能嗎?如果沒有是否有其它方式可以辦到?
(我看到yahoo的文章是可以分類的..不知道google可不可以)

謝謝~

風痕影 提到...

Google 有 tag 可以用啊 XD
你可以把它當成分類來用..

Skyvee 提到...

birdie你好,
A. draft blogger 提供的搜尋是ajax, 所以不會感覺有換頁, 直接會顯示在頁面的最上方,所以你要把網頁往上拉一點, 就可以看到結果. 所以最好把搜尋放上面一點, 我目前站內放的搜尋是用adsense search, 呈現效果不太一樣. 因為我自己的版面把search放最上方, 不太好看, 才先用adsense search.

B. 分類的部分, 其實blogger有提供一個標籤的功能, 就是在張貼文章時, 下方的張貼選項旁邊, 有這樣一列" 此文章的標籤:
例如:輕型機車、渡假、秋季 ", 這意思就是輸入這篇文章的關鍵字, 然後,你再把網頁選項中的標籤功能, 加入blogger, 就會看到會依標籤list了.

Skyvee 提到...

謝謝風痕影的幫忙回答. :)

Birdie 提到...

非常謝謝您詳細的解說
B. 已經OK了

A. 但是我使用draft blogger 提供的搜尋,卻是無法搜尋網誌內的資料,搜尋的結果永滿是null,不知道您是否有遇過相同的困擾。

Birdie 提到...

剛剛有去查了資料,發現 draft blogger 提供的搜尋 對於站內搜尋確實是還有問題,
不過也有發現到一個簡單好用的方法,可以推薦給您參考

http://jinyaolin.blogspot.com/2006/10/blogger.html

Skyvee 提到...

謝謝birdie的訊息, draft blogger的search 問題, 我想應該會得到解決的. 先用堯大提供的方法也是個暫解. :)

賊又賊 提到...

ie正常但Firefox不正常喔!
不知為什麼?

skyvee 提到...

juj, 要不要先把包住 code 前後的 <p>, </p>拿掉, 再試看看?

ralph 提到...

版主您好
想請問為什麼按照您的方式操作後
卻無法出現包住程式碼的作用呢
像我想把貼紙連結的語法包起來
但發表文章後
沒辦法包住
而直接顯示貼紙的圖片呢

skyvee 提到...

ralph, 我不太明白你的意思呢?你意思是說沒包住,而只顯示圖片嗎?可能要看到頁面才能知道哩..

Duke 提到...

想請問一下...
這個語法的目的只是讓程式碼用區塊標示出來,
還是能讓標示出來部分的程式碼功能失效?

因為想做教學,但標示出來部份的程式碼都直接被瀏覽器解讀出來...

麻煩回覆了,感恩。

Skyvee 提到...

Duke,這的確是只能標示程式碼區塊而已, 如果你希望能成功顯示程式碼, 就要以 &lt; 取代 < , 而 &gt; 取代 > .(請把那4個符號改成半形)

Duke 提到...

瞭解了,真是清楚的教學!^^
兜瞎哩~

能把你的blog放在我blog的連結裡嗎?
﹝先斬後奏...﹞

skyvee 提到...

duke,是我的榮幸, 謝謝你!^^

十惡不赦的廢人 提到...

抱歉,請問我發現最左邊的Code那張圖片突然消失了,請問要怎麼再讓它出現?

skyvee 提到...

你好, 可以重新再下載一次圖檔後, 再上傳到原本你放code圖片的網路空間.

十惡不赦的廢人 提到...

我原本就是使用自己上傳的圖片。

但最近發現那個Code欄不見,以為是我自己的問題,所以就過來這邊看看,後來看到這篇文章上面的範例也是沒有Code,才問問看。

我為我之前的回應語義不清道歉。

skyvee 提到...

咦, 這裡我有看到code欄啊! @@ 你的blog,我連上去看,也有看到啊!

十惡不赦的廢人 提到...

嗯,看來是我電腦的問題了orz

抱歉麻煩了,謝謝您: )

skyvee 提到...

會不會是瀏覽器的問題? 0.0

Neil 提到...

請問如果程式碼過長
而我不想出現左右的捲軸條
我想讓文字自動換行
該怎做@@

Skyvee 提到...

捲軸與這行程式有關 max-height:200px;, 如果不想出現捲軸,就將值設高一點. 內容不要太多,就不會出現捲軸了!

Neil 提到...

版主~您說的max-height:200px;
這是高度(上下捲軸)
而我說的是寬度(左右捲軸)
我是想讓很長的一段文字到底時自動換下行
而不是出界

我後來去網路找了很多資料
CSS怎麼設定都是沒辦法的
發現其實是firefox瀏覽器的關係
如果是一串很長的英文字或數字
firefox就會出界了,不會自動斷行
而IE會自動斷行

看來只能祈禱firefox改善這問題了...囧"

skyvee 提到...

Neil,與瀏覽器有關的問題,真的不好解.這問題我倒沒碰過,很謝謝你提出來會有這現象. 不能自動斷行,暫時解就只能先手動斷行了.

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.