如何在 Blogger 文章中顯示程式碼區塊?
最近在學習新的技能,各種筆記整理將會是一個成敗關鍵,而且有時也會想要對 Blogger 做一點樣式上的調整。像是之前調整 Blogger 字型後,留言板就壞了;還有這個版型的精選文章不要在單篇文章出現等問題,花了好幾天 Google 到解法,但沒有好好寫筆記,現在就完全想不起來是動到什麼、調整了什麼才變好的(攤手)。Anyway,最近也感受到「發表部落格文章」和「寫在自己的本機 / 紙本筆記本」威力不同,明明本質上都是「筆記」,會有這種差異真的好神奇啊!
總之這篇想來暖暖手、紀錄一下:撰寫 Blogger 文章時,怎樣才能在版面中顯示程式碼區塊?
— 我是照著 Wei 的 Blogger 閱讀記事:「應用 Google Code Prettify在 blogger 中顯示程式」這篇文章的引導完成任務的,筆記也是參照這篇文章所整理唷!
筆記開始
預設程式碼區塊設置
- 在 Blogger 管理介面中,點擊「版面配置」。
- 在「版面配置」頁中的「側欄(底部)」點擊「新增小工具」後顯示 popup。
- 在 popup 上點擊加入「HTML / JavaScript」:
- 將顯示「HTML / JavaScript」checkbox 打勾。
- 標題的部分可不填。
- 內容的部分貼上 Google Code Prettify 的程式碼如下:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
- 按下儲存後將這個版面配置排在「側欄(底部)」中的最後一個。
- 完成 🙂
接下來在 Blogger 寫文章時使用這個語法吧!
- 先將想放在文內的程式碼複製起來貼到 HTML 編碼器中。
- 接著將 Blogger 編輯器切換為 HTML 編輯模式,在文內貼上以下程式碼,並將 ... 中的內容換成 HTML 編碼器轉換過的內容。
<pre class="prettyprint linenums">...</pre>
- 文章應該有順利產生程式碼區塊了吧 :)
不喜歡預設程式碼區塊的白底?為什麼不是黑色背景的?
- 在 Prettify Themes Gallery 選一個喜歡的樣式
- 如:想套用 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>
弄好自己喜歡的程式碼區塊樣式了嗎 :)
留言
張貼留言