在Blogger文章中插入程式碼

Blogger Logo

Blogger也可以

上一篇「在文章中插入程式碼」是針對WordPress架站的解決方案,但是高登在Blogger也有另一個分站「紅豬部落」同步發文,所以就算上一篇沒有網友留言說Blogger不能用,高登也一定要找出在Blogger文章中插入程式碼的解決方案。

首先針對:「要能夠直接打< 和 >而不用轉換。」Blogger有人將SyntaxHighlight的Javascript轉成Blogger可以用,但是高登看了一下對一般人而言有些難度,所以找到這一個解決方案,這個不只是Blogger可以用,所有的部落格或是網站都可以用。

HTML Encoder網站

請到「HTML Encoder」這個網頁將你的程式碼貼上,按下〔Encode〕按鈕,就可以在下方看到已經將你的「<」和「>」都轉好了,複製起來就可以用了。

在Blogger文章中插入程式碼

接下來就針對「要加一段<pre>用的CSS,裡面要有防止溢位的功能」的解決方案:

修改Blogger CSS

用Blogger/Blogspot的好處就是所有原始程式是公開的,只要你會改就沒有什麼太大的限制。接下來在你的Blogger後台選擇〔版面配置〕→〔修改HTML〕→勾選〔展開小裝置範本〕,插入這一段CSS程式碼:

.post pre {
background: #F0F0F0 url(https://你的圖片網址/blogger-code.gif) repeat-y scroll left top;
border: 1px solid #CCCCCC;
color: #333333;
display: block;
font-family: Courier New;
font-size: 10pt;
line-height: 120%;
margin: 5px 0 0 20px;
max-height: 200px;
overflow: auto;
padding: 10px 10px 10px 21px;
width: 90%;
}

請記得將「圖片網址」改成你自己上傳的圖片網址,還有這段程式碼我是放在「.post-body」的前面,你也不一定要放在這裡,但是相關的放在一起會比較好找,好了之後〔儲存範本〕就一切OK了。

發文

這樣子你以後要插入程式碼只要用<pre></pre>包住:

在Blogger文章中插入程式碼

就可以像WordPress一樣的快樂貼程式碼了。

在Blogger文章中插入程式碼

至於其他的BSP就等大家自己試囉!。

如果您是第一次來到本站,而且覺得本站的內容不錯的話,建議你透過 訂閱 本站的方式,隨時取得本站的最新內容。同時也歡迎您 按讚
Facebook 粉絲團以及
Google+ 專頁
如果這篇文章有幫到您也麻煩您按個讚
並分享出去,謝謝您!

有 25 則迴響於 在Blogger文章中插入程式碼

  1. 徵信 說:

    看起來有點難的樣子

    還是要用wordpress 好

  2. 太感謝了, 這解決了我很大的痛苦
    這一陣子, 我都被迫把程式碼作成圖片才貼上來
    很是麻煩

    再次的謝寫您

  3. yuanlin 說:

    不想改 template 也可以用這個網頁來幫忙
    http://formatmysourcecode.blogspot.com/
    比較麻煩的是要post source code 就要連他的網站

  4. 歪歪 說:

    其實,
    每一個部落格都可以使用類似CODE的東西,
    因為大部分的BSP都提供修改CSS的功能~~
    只要把圖片放在圖床,再用剛剛文章上的CODE碼,
    在發文的時候,加上所設定的class去對應,
    簡單的CODE框框就完成囉!
    (也就是說大部分的BSP都可以用)

  5. 風痕影 說:

    有個單機版的軟體也可以轉換這些
    我記得叫做「北斗字碼轉換器」

  6. 小豪 說:

    你好,看過很多教學,你的算是最清楚的了,但是我有一個很笨的疑問,希望你能幫我解惑一下.

    照你說的方法

    Blogger後台選擇〔版面配置〕→〔修改HTML〕→勾選〔展開小裝置範本〕,插入這一段CSS程式碼

    去修改BLOGGER的HTML,然後再 上方插入了你的程式,但是卻在預覽時直接看到這段程式碼在網頁上方,看來是我搞錯了甚麼地方,可以幫我解答一下嗎?

  7. Jim 說:

    好精彩的文章^^謝謝!!學到很多!

  8. Mr.痣 說:

    試用成功~感謝分享~

  9. forgot 說:

    你好 我照你的程式碼貼照CSS裡面
    但是我並沒有下面的那個橫向捲軸耶

  10. 言俞 說:

    你好!
    Google這程式碼怎麼轉,修改
    要貼YAHOO部落格都失敗
    麻煩指教一下謝謝

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

首次留言要通過審核之後才會出現在版面上,請大家不要重覆留言。如果留言的內容與本篇文章無關、廣告留言、商業網站連結、假的網址或信箱的那留言可能就會跑到火星去哦!如果怕忘記在哪一篇文章留言,你只要在下面的e-mail通知那裡打勾就可以收到留言回覆的Email,謝謝大家的配合!