Fun New Run High: 在教學文章中, 與眾不同你的程式碼

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可不可以)

謝謝~; 7/30/2007
風痕影提到...: Google 有 tag 可以用啊 XD
你可以把它當成分類來用..; 7/30/2007
Skyvee 提到...: birdie你好,
A. draft blogger 提供的搜尋是ajax, 所以不會感覺有換頁, 直接會顯示在頁面的最上方,所以你要把網頁往上拉一點, 就可以看到結果. 所以最好把搜尋放上面一點, 我目前站內放的搜尋是用adsense search, 呈現效果不太一樣. 因為我自己的版面把search放最上方, 不太好看, 才先用adsense search.

B. 分類的部分, 其實blogger有提供一個標籤的功能, 就是在張貼文章時, 下方的張貼選項旁邊, 有這樣一列" 此文章的標籤：
例如：輕型機車、渡假、秋季 ", 這意思就是輸入這篇文章的關鍵字, 然後,你再把網頁選項中的標籤功能, 加入blogger, 就會看到會依標籤list了.; 7/30/2007
Skyvee 提到...: 謝謝風痕影的幫忙回答. :); 7/30/2007
Birdie 提到...: 非常謝謝您詳細的解說
B. 已經OK了

A. 但是我使用draft blogger 提供的搜尋，卻是無法搜尋網誌內的資料，搜尋的結果永滿是null，不知道您是否有遇過相同的困擾。; 7/31/2007
Birdie 提到...: 剛剛有去查了資料，發現 draft blogger 提供的搜尋對於站內搜尋確實是還有問題，
不過也有發現到一個簡單好用的方法，可以推薦給您參考

http://jinyaolin.blogspot.com/2006/10/blogger.html; 7/31/2007
Skyvee 提到...: 謝謝birdie的訊息, draft blogger的search 問題, 我想應該會得到解決的. 先用堯大提供的方法也是個暫解. :); 7/31/2007
賊又賊提到...: ie正常但Firefox不正常喔!
不知為什麼?; 11/22/2007
skyvee 提到...: juj, 要不要先把包住 code 前後的＜p>, ＜/p>拿掉，　再試看看?; 11/22/2007
ralph 提到...: 版主您好
想請問為什麼按照您的方式操作後
卻無法出現包住程式碼的作用呢
像我想把貼紙連結的語法包起來
但發表文章後
沒辦法包住
而直接顯示貼紙的圖片呢; 5/03/2008
skyvee 提到...: ralph, 我不太明白你的意思呢?你意思是說沒包住,而只顯示圖片嗎?可能要看到頁面才能知道哩..; 5/03/2008
Duke 提到...: 想請問一下...
這個語法的目的只是讓程式碼用區塊標示出來，
還是能讓標示出來部分的程式碼功能失效？

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

麻煩回覆了，感恩。; 6/04/2008
Skyvee 提到...: Duke,這的確是只能標示程式碼區塊而已, 如果你希望能成功顯示程式碼, 就要以＆ｌｔ；取代 < , 而＆ｇｔ；取代 > .（請把那４個符號改成半形）; 6/05/2008
Duke 提到...: 瞭解了，真是清楚的教學！^^
兜瞎哩~

能把你的blog放在我blog的連結裡嗎？
﹝先斬後奏...﹞; 6/09/2008
skyvee 提到...: duke,是我的榮幸, 謝謝你!^^; 6/09/2008
十惡不赦的廢人提到...: 抱歉，請問我發現最左邊的Code那張圖片突然消失了，請問要怎麼再讓它出現？; 8/14/2008
skyvee 提到...: 你好, 可以重新再下載一次圖檔後, 再上傳到原本你放code圖片的網路空間.; 8/15/2008
十惡不赦的廢人提到...: 我原本就是使用自己上傳的圖片。

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

我為我之前的回應語義不清道歉。; 8/15/2008
skyvee 提到...: 咦, 這裡我有看到code欄啊! @@ 你的blog,我連上去看,也有看到啊!; 8/15/2008
十惡不赦的廢人提到...: 嗯，看來是我電腦的問題了orz

抱歉麻煩了，謝謝您: ); 8/15/2008
skyvee 提到...: 會不會是瀏覽器的問題? 0.0; 8/15/2008
Neil 提到...: 請問如果程式碼過長
而我不想出現左右的捲軸條
我想讓文字自動換行
該怎做＠＠; 12/01/2008
Skyvee 提到...: 捲軸與這行程式有關 max-height:200px;, 如果不想出現捲軸,就將值設高一點. 內容不要太多,就不會出現捲軸了!; 12/04/2008
Neil 提到...: 版主～您說的max-height:200px;
這是高度（上下捲軸）
而我說的是寬度（左右捲軸）
我是想讓很長的一段文字到底時自動換下行
而不是出界

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

看來只能祈禱firefox改善這問題了...囧"; 12/05/2008
skyvee 提到...: Neil,與瀏覽器有關的問題,真的不好解.這問題我倒沒碰過,很謝謝你提出來會有這現象. 不能自動斷行,暫時解就只能先手動斷行了.; 12/07/2008