如何在 Blogger 貼出漂亮的程式碼區塊？

最近開始在Blogger在撰寫技術文章時，發現文章有簡單的程式碼卻無法顯示(漂亮)，在網路上搜尋了一些文章，看到有很多方式，不過大都是2020年前的居多，在搭配gemeni後，簡單寫一下步驟。要注意的是，套用的主題可能會干擾，所以還是要檢視一下成果。

步驟:

1. 前往 Blogger 後台，點選「版面配置」> 點擊「新增小工具」。
   

2. 在彈出視窗中選擇「HTML/JavaScript」
   

把程式碼貼入「內容」區塊，記得要停用「顯示這個小工具」，「標題」可不輸入。

Markdown

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>

<script>
// 等待網頁元素載入完成後再執行，避免抓不到文章
document.addEventListener("DOMContentLoaded", () => {
  const converter = new showdown.Converter();
  const posts = document.querySelectorAll(".post-body");

  // 走訪每一篇文章
  posts.forEach(post => {
    let content = post.innerHTML.trim(); // 清除開頭結尾的多餘空白與換行

    // 檢查文章開頭是否為 "markdown"
    if (content.startsWith("markdown")) {
      // 1. 移除開頭的 "markdown" 字眼 (擷取第 8 個字元之後的內容)
      content = content.substring(8);

      // 2. 還原 Blogger 自動轉譯的 HTML 特殊字元
      content = content
        .replace(/&gt;/g, ">")
        .replace(/&lt;/g, "<")
        .replace(/&amp;/g, "&");

      // 3. 將 Markdown 轉換為 HTML 並替換回文章中
      post.innerHTML = converter.makeHtml(content);
    }
  });

  // 為轉換後的所有 <pre> 標籤加上 prettyprint class
  document.querySelectorAll("pre").forEach(pre => {
    pre.classList.add("prettyprint");
  });
});
</script>

<!-- 引入 code-prettify (替換掉已失效的 rawgit，改用 jsdelivr CDN) -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>

儲存完就可以了。