↓ ↓ 請免費贊助本站,只需1秒時間 ↓ ↓

2013/03/26

[教學] 如何在 Blogger 文章裡顯示程式碼?

這篇主要是為了方便自己日後的使用、方便大家的閱讀,以及有這個需要的使用者能夠快速了解,所留下的個人筆記資料文章。

※ 以下所有圖片,點選後可放大。

1. 首先,由於在 Blogger 裡增加這項效果需要變更範本內容,所以建議先備份範本(Blogger 範本備份教學)。

2. 進入管理後台,切換到「範本」後,點選「編輯 HTML」。

















3. 先勾選「展開小裝置範本」,再按「F3」,輸入「/* Posts」尋找它的所在位置。



















4.
.post code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
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:250px;
line-height: 1.2em;
}

將以上 CSS 程式碼複製並插入到「/* Posts」後方,如下圖所示,最後記得點選「儲存範本」。


















5. 之後只要再想要顯示程式碼前後分別加上「<code>」和「</code>」即可。使用時要記得先切換到「HTML」編輯模式。顯示效果如第 4 步驟中的 CSS 程式碼。另外,要特別注意的是,要顯示的程式碼當中如有「<」或「>」的時候,前後者要分別改成「&lt;」和「&gt;」(在此的 & 因顯示效果緣故,以全形輸入,使用時採用半形即可)。如果手動轉換過於繁複,可按此透過線上轉換器幫你完成。














【版權資訊】(引用規定)
作者:ChaoRC
網址:http://www.chaofree.com/2013/03/how-to-show-script-code-in-post-by-blogger.html

備註
[註1] 資料來源


關鍵字:Block code in blogger post, 在 Blogger 顯示程式碼區塊

沒有留言:

張貼留言

[1] 本站留言區屬於即時顯示,任何留言者之言論不代表本站立場,發表意見前請自行審酌留言內容。本站保留刪除垃圾留言、廣告留言、不當留言及違法言論之權力,若造成不便敬請見諒。

[2] 一旦您於本站發表意見,即視為知悉並同意本站之網站聲明中之各項內容。

[3] 如有在本篇文章留言,建議勾選留言區右下角的「通知我」,以利收到後續回覆通知。

[4] 留言區可以使用HTML標記,例如「< b >, < i >, < a >...」等。