如何在 Blogger 文章中顯示程式碼區塊?

最近在學習新的技能,各種筆記整理將會是一個成敗關鍵,而且有時也會想要對 Blogger 做一點樣式上的調整。像是之前調整 Blogger 字型後,留言板就壞了;還有這個版型的精選文章不要在單篇文章出現等問題,花了好幾天 Google 到解法,但沒有好好寫筆記,現在就完全想不起來是動到什麼、調整了什麼才變好的(攤手)。Anyway,最近也感受到「發表部落格文章」和「寫在自己的本機 / 紙本筆記本」威力不同,明明本質上都是「筆記」,會有這種差異真的好神奇啊!


總之這篇想來暖暖手、紀錄一下:撰寫 Blogger 文章時,怎樣才能在版面中顯示程式碼區塊?
— 我是照著 Wei 的 Blogger 閱讀記事:「應用 Google Code Prettify在 blogger 中顯示程式」這篇文章的引導完成任務的,筆記也是參照這篇文章所整理唷!


筆記開始
預設程式碼區塊設置
  1. 在 Blogger 管理介面中,點擊「版面配置」。
  2. 在「版面配置」頁中的「側欄(底部)」點擊「新增小工具」後顯示 popup。
  3. 在 popup 上點擊加入「HTML / JavaScript」:
    • 將顯示「HTML / JavaScript」checkbox 打勾。
    • 標題的部分可不填。
    • 內容的部分貼上 Google Code Prettify 的程式碼如下:
      <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
  4. 按下儲存後將這個版面配置排在「側欄(底部)」中的最後一個。
  5. 完成 🙂


接下來在 Blogger 寫文章時使用這個語法吧!
  1. 先將想放在文內的程式碼複製起來貼到 HTML 編碼器中
  2. 接著將 Blogger 編輯器切換為 HTML 編輯模式,在文內貼上以下程式碼,並將 ... 中的內容換成 HTML 編碼器轉換過的內容。
    <pre class="prettyprint linenums">...</pre>

  3. 文章應該有順利產生程式碼區塊了吧 :)


不喜歡預設程式碼區塊的白底?為什麼不是黑色背景的?
  1. Prettify Themes Gallery 選一個喜歡的樣式
  2. 如:想套用 Sunburst 樣式 → 在 run_prettify.js 後面增加 ?skin=Sunburst 即可
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">


想在程式碼區塊呈現行號?那就在剛才增加的「HTML / JavaScript」中再增加以下的語法:
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>

弄好自己喜歡的程式碼區塊樣式了嗎 :)


留言

這個網誌中的熱門文章

邊緣人的終極密碼 —JavaScript 程式入門經典練習題「猜數字猜到飽」

排球少年山口忠:平凡的我們也能威力十足