如何在 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