WFU

2024/10/10

Blogger 頁面增加 程式區塊 (code block) 的方法


blogger 並沒有內建顯示 code block 區塊的方法，但仍有方法可以自己手動新增此功能，來達成將程式碼或文字，放置於 code block 區塊，並有「複製區塊內容」的功能，方便使用者可快速複製。

步驟１- 進入主題編輯HTML頁面

blogger 後台頁面 → 主題 → 自訂 → 編輯 HTML。進到一堆 HTML 碼的頁面。


步驟 2 - 增加外部樣式與 CSS 定義

在 HTML 頁面上點一下，按 Ctrl+F，輸入(搜尋) </head> 。
找到此 HTML 標籤後，在這個標籤之前添加以下程式碼(可按程式區塊的右上塊"複製"按鈕)。程式碼有包含註解，可自行依據需求更改。 
 <!-- 在 Blogger 模板的 </head> 標籤前添加以下代碼 -->
<!-- 引入 Highlight.js 的 CSS 文件 -->
<!-- 這個 CSS 文件定義了代碼高亮的基本樣式 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/>
<!-- 引入 Highlight.js 的 JavaScript 文件 -->
<!-- 這個 JS 文件包含了實現代碼高亮的核心功能 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>

/* 自定義代碼塊樣式 */
<style>
  /* 設置代碼塊的基本樣式 */
  pre {
    position: relative;       /* 設置為相對定位，為絕對定位的子元素提供參考 */
    background-color: #343434;/* 設置深灰色背景 */
    border-radius: 6px;       /* 添加圓角邊框 */
    padding: 6px;             /* 設置內邊距 */
    display: block;           /* 將pre元素設置為塊級元素 */
    overflow: auto;           /* 內容溢出時顯示滾動條 */
  }
  
  /* 設置代碼文本的樣式 */
  code {
    font-family: "Arial", "Hoefler Text", "Liberation Serif", monospace; /* 設置字體，優先使用 Arial */
    font-size: 14px;          /* 設置字體大小 */
    line-height: 1.5;         /* 設置行高為字體大小的1.5倍 */
  }
  
  /* 複製按鈕的樣式 */
  .copy-button {
    position: absolute;       /* 絕對定位，相對於pre元素 */
    top: 5px;                 /* 距離頂部5像素 */
    right: 5px;               /* 距離右側5像素 */
    padding: 3px 8px;         /* 設置內邊距，上下3像素，左右8像素 */
    font-size: 16px;          /* 設置字體大小 */
    color: #fff;              /* 設置文字顏色為白色 */
    background-color: #0366d6;/* 設置背景顏色為GitHub藍 */
    border: none;             /* 移除邊框 */
    border-radius: 4px;       /* 添加圓角 */
    cursor: pointer;          /* 滑鼠懸停時顯示手型光標 */
  }
  
  /* 複製按鈕懸停效果 */
  .copy-button:hover {
    background-color: #0056b3;/* 滑鼠懸停時變為深藍色 */
  }
</style>
貼上程式碼後，畫面示意圖如下:

步驟 3 - 增加 JS 控制碼(啟動+複製功能)，完成基本設定

和步驟 2 很相似。在 HTML 編輯頁面，按 Ctrl+F，輸入(搜尋) </body> 。
找到此 HTML 標籤後，在這個標籤之前添加以下程式碼(可按下方程式區塊的右上塊"複製"按鈕)。完成後，按右上角的"儲存"圖示，完成此部份的基本設定。
 <script>
  // 初始化 highlight.js
  hljs.highlightAll();
  
  // 添加複製按鈕功能
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre').forEach((block) => {
      const button = document.createElement('button');
      button.innerText = '複製';
      button.className = 'copy-button';
      button.addEventListener('click', () => {
        const code = block.querySelector('code');
        navigator.clipboard.writeText(code.innerText).then(() => {
          button.innerText = '已複製!';
          setTimeout(() => {
            button.innerText = '複製';
          }, 2000);
        });
      });
      block.appendChild(button);
    });
  });
</script>


步驟 4 - 如何在 blogger 頁面使用?

在 blog 文章編輯頁面中，左上角的編輯模式要選擇 「HTML 檢視」才能增加 code block。

基本 code block 的格式為：
<pre><code> {顯示於區塊內的內容} </pre></code> 

例如插入以下文字
 <pre><code class="python">
 // 要放置的 code 內容
 print("Hello World!")
</pre></code>
呈現的區塊畫面為: 
 // 要放置的 code 內容
 print("Hello World!")
class="..."，此處可以指定程式碼高亮度的顯示格式，可參考 此網頁 的代碼說明，常用的如下:
<code class="plaintext"> :純文字模式
<code class="python"> : python 格式
<code class="html"> : HTML 格式
<code class="markdown"> : Markdown 格式
<code class="nohighlight"> : 不套用高亮度格式


以下是 markdown 格式的示範，在 HTML 檢視放入以下內容:
<pre><code class="markdown">
# 資料科學與 AI 趨勢

**資料科學** 結合數據分析與 AI 技術，廣泛應用於各領域，如 **金融** 的風險管理、**醫療** 的疾病預測，以及 **行銷** 的個性化推薦。

## 1. 人工智慧的應用

- **聊天機器人** 改善客戶服務
- **自動駕駛** 改變交通行業
- **智慧工廠** 提升生產效率

> "AI 將在未來五年徹底改變多個行業。" - *AI 報告, 2023*
</code></pre>

於 blog 頁面上的顯示為: 
# 資料科學與 AI 趨勢

**資料科學** 結合數據分析與 AI 技術，廣泛應用於各領域，如 **金融** 的風險管理、**醫療** 的疾病預測，以及 **行銷** 的個性化推薦。

## 1. 人工智慧的應用

- **聊天機器人** 改善客戶服務
- **自動駕駛** 改變交通行業
- **智慧工廠** 提升生產效率

> "AI 將在未來五年徹底改變多個行業。" - *AI 報告, 2023*
標籤： ,