為你的網站加上專業的程式碼區塊：Prism.js 實戰教學
前言：為何需要語法高亮？
在技術文章、教學部落格或作品集中，程式碼範例是不可或缺的一環。單純的純文字程式碼不僅閱讀困難，也顯得不夠專業。語法高亮 (Syntax Highlighting) 可以根據不同程式語言的關鍵字、變數、註解等，賦予不同的顏色和樣式，大幅提升程式碼的可讀性與美觀度，帶給讀者更好的閱讀體驗。
這份教學將分解建置高亮語法區塊所需的各個組件，並說明其功能與放置方式。
1. 引入 Prism 主題樣式表 (外觀主題)
這是整個語法高亮功能的第一個基石：決定程式碼「長相」的佈景主題。
程式碼
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />功能說明
這行程式碼透過 <link> 標籤，從 CDN (內容傳遞網路) 引入了 Prism.js 函式庫中一個名為 prism-okaidia.min.css 的 CSS 檔案。它定義了程式碼區塊的顏色、背景、字體樣式等視覺外觀。您可以更換 href 中的檔案名稱（例如換成 prism-solarizedlight.min.css）來改變主題。
放置位置
HTML: 這段程式碼必須放在 HTML 文件的 <head> 區塊內。
2. 自訂 CSS 樣式碼 (排版與美化)
這部分是您自己網站的客製化樣式，用來微調版面、定位複製按鈕，並定義按鈕本身的外觀。
程式碼
/* 程式碼區塊的容器，用於定位複製按鈕 */
.post-body .code-block-container {
position: relative;
margin: 1.5em 0;
}
/* 程式碼區塊本身 */
.post-body pre[class*="language-"] {
padding: 2em 1em 1.2em 1em;
margin: 0;
overflow: auto;
border-radius: 0.5em;
font-size: 15px;
}
/* 複製按鈕的樣式 */
.post-body .copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 6px 12px;
background-color: #5a5a5a;
color: #efefef;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.post-body .copy-btn:hover {
opacity: 1;
}
.post-body .copy-btn.copied {
background-color: #28a745; /* 成功時變為綠色 */
}功能說明
這組 CSS 規則有三個主要目的：
- 建立一個相對定位的容器 (.code-block-container)，讓複製按鈕可以精準地放在它的右上角。
- 微調程式碼區塊 (pre) 的內邊距 (padding)，在頂部留出空間給按鈕。
- 定義複製按鈕 (.copy-btn) 的外觀、位置及互動效果（如滑鼠懸浮、點擊後變色）。
放置位置
HTML: 將整段 CSS 用 <style> 標籤包起來，放在 <head> 區塊內。
XML (Blogger/Blogspot 平台): 請進入後台的「編輯 HTML」模式，在您的範本中找到 ]]></b:skin> 這行程式碼。然後將上面提供的所有自訂 CSS 程式碼，完整地貼在它的「正上方」。
3. JavaScript 腳本碼 (核心功能與互動)
這部分是實現所有動態功能的「大腦」，包含語法高亮的引擎與複製按鈕的邏輯。
程式碼
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.code-block-container').forEach(function(container) {
const pre = container.querySelector('pre');
if (pre) {
const button = document.createElement('button');
button.className = 'copy-btn';
button.textContent = '複製';
container.appendChild(button);
button.addEventListener('click', function() {
const code = pre.querySelector('code').textContent;
navigator.clipboard.writeText(code).then(function() {
button.textContent = '已複製!';
button.classList.add('copied');
setTimeout(function() {
button.textContent = '複製';
button.classList.remove('copied');
}, 2000);
}).catch(function(err) {
console.error('複製失敗: ', err);
});
});
}
});
});
</script>功能說明
這組腳本協同工作：
- Prism Core: 語法高亮的核心引擎。
- Prism Autoloader: 自動偵測並載入所需語言的規則，極大簡化了管理。
- 自訂腳本: 尋找頁面上的程式碼區塊，並為它們動態加上功能齊全的「複製」按鈕。
放置位置
HTML: 為了確保在執行腳本時，頁面上的所有 HTML 元素都已經被載入，標準作法是將所有 <script> 標籤放在 <body> 區塊的最末端，也就是 </body> 標籤的「正上方」。
XML (Blogger/Blogspot 平台): 在「編輯 HTML」模式下，您同樣是找到範本中的 </body> 標籤，並將所有 <script> 腳本碼貼在它的「正上方」。
4. 撰寫您的內容與程式碼區塊
準備好以上所有工具後，您就可以在網頁內容中，開始撰寫帶有高亮效果的程式碼了。
HTML 結構
請務必使用以下的三層結構，以確保 CSS 和 JavaScript 能夠正確地作用於它。
<div class="code-block-container">
<pre><code class="language-python">
# 這是一段 Python 程式碼
def greet(name):
print(f"Hello, {name}!")
greet("World")
</code></pre>
</div>將 language-python 換成您需要的任何語言（如 html, css, cpp, java 等），Prism 的自動載入器就會為您處理好一切。