Code Formatter 更新: 複製CODE及HTML預覽

問題與答案 (FAQ)

Q&A 類別 A: 概念理解類

A-Q1: 什麼是 Code Formatter 外掛？

• A簡: 針對 Windows Live Writer 的外掛，協助張貼程式碼與 HTML，並新增「COPY CODE」與「HTML 預覽」兩項便捷功能。
• A詳: Code Formatter 是一個用於 Windows Live Writer 的外掛，目標是讓部落格作者更輕鬆地張貼程式碼與 HTML 範例。更新後，它在原有格式化功能外，加入兩項實用增強：一是「COPY CODE」按鈕，讓讀者一鍵複製範例；二是「HTML 預覽」，同時顯示 HTML 原始碼及渲染效果。它改善讀者體驗、節省作者在原始碼與顯示效果間重複貼文的時間，特別適合教學文、技術筆記與範例導向的內容。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q2, A-Q3, A-Q5, B-Q1

A-Q2: 這次更新加入了哪些功能？

• A簡: 兩項增強：COPY CODE 一鍵複製程式碼；HTML PREVIEW 同步顯示 HTML 原始碼與實際渲染效果。
• A詳: 更新重點有二。其一是 COPY CODE，靈感源自 MSDN 範例，於每段程式碼旁新增按鈕，點擊後自動將該段程式碼複製到剪貼簿，方便讀者快速帶走可用片段。其二是 HTML PREVIEW，為 HTML 相關文章設計，讓同一段內容同時以「編碼後的原始碼」與「可視化的渲染結果」呈現，省去作者在編輯器中來回切換與重貼的麻煩。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q3, A-Q5, B-Q2

A-Q3: 什麼是 COPY CODE 功能？

• A簡: 在程式碼區塊旁提供按鈕，點擊即可將該區塊純文字內容複製到使用者剪貼簿。
• A詳: COPY CODE 是一個置於程式碼區塊旁的操作按鈕。使用者點擊後，前端程式會取得該區塊純文字內容（避免夾帶標記或行號），呼叫瀏覽器提供的剪貼簿 API 或相容方法，將內容寫入剪貼簿。其目的在於降低讀者手動選取與複製的摩擦，提升範例可移植性與可重用性，特別適用於教學文與示範性程式碼。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q1, B-Q6, D-Q1

A-Q4: COPY CODE 為何重要？

• A簡: 它降低讀者操作成本、避免選取錯誤，提升範例可用性與文章專業度，常見於技術文件。
• A詳: 對讀者而言，一鍵複製比手動拖拉選取更快也更可靠，避免帶到多餘字元、行號或標記，提升「拿來就能用」的成功率。對作者與平台而言，它降低讀者流失、提升文章互動與共享性，亦與主流技術文件體驗一致（如 MSDN 等），強化專業印象與知識傳遞效率。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, D-Q2, B-Q12

A-Q5: 什麼是 HTML PREVIEW？

• A簡: 同步呈現 HTML 原始碼（經編碼）與實際渲染結果的功能，便於示例與對照學習。
• A詳: HTML PREVIEW 針對教學情境設計，讓文章同時顯示「HTML 原始碼」（轉為安全的 HTML 實體，避免被瀏覽器解析）與「渲染結果」（在隔離容器中實際顯示效果）。讀者能直接對照原始碼與畫面，理解標籤、屬性與樣式如何影響視覺呈現，作者也免去在編輯器裡重複貼兩份內容的繁瑣流程。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q2, A-Q10, B-Q2, B-Q10

A-Q6: 為什麼需要 HTML 預覽？

• A簡: 節省作者重複貼文成本，讓讀者直觀對照原始碼與結果，加速學習與驗證。
• A詳: 過往教學常要同時呈現「看得懂的原始碼」與「實作結果」。若手動維護兩份內容，容易不同步且耗時。HTML 預覽整合這兩面向：原始碼經編碼安全呈現；結果在隔離容器中正確渲染。此設計提升文章清晰度、降低錯誤率，也讓讀者能快速驗證所見即所得，特別適合排版、語意化標籤與 CSS 示範。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, B-Q2, B-Q11, D-Q3

A-Q7: 程式碼區塊與 HTML 預覽的差異？

• A簡: 程式碼區塊呈現原始文字；HTML 預覽則實際渲染標記，兩者分別對應閱讀與體驗。
• A詳: 程式碼區塊（如 pre/code）強調以文字原貌展示，不被瀏覽器解讀，方便複製與學習語法。HTML 預覽則將同內容交由瀏覽器解析後呈現，顯示最終畫面與互動行為。兩者相輔相成：前者保障可讀與可複製，後者提供所見即所得的理解途徑。透過外掛可自動維持兩者一致，避免手動維護差異。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, B-Q5, B-Q10

A-Q8: 什麼是 Windows Live Writer 外掛？

• A簡: 一種擴充 Live Writer 編輯與發佈能力的組件，可注入標記、樣式與客製功能。
• A詳: Windows Live Writer 是一款部落格離線編輯器。外掛則是針對其編輯與發佈流程的擴充元件，能在使用者編寫或發佈文章時，自動插入特定 HTML 結構、腳本與樣式，或提供工具列按鈕與對話框，加速常見工作。Code Formatter 外掛便是此類實例，專注在程式碼張貼體驗的優化與預覽增強。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, B-Q3, C-Q8

A-Q9: 外掛與網站版 Code Formatter 差異？

• A簡: 外掛偏重作者端編輯流程整合；網站版多為前端展示。外掛可一次產出兩份對應內容。
• A詳: 網站版常著重於前端顯示（例如語法高亮、主題樣式），需作者手動貼上對應標記。外掛則在編輯階段即生成標準化結構與所需按鈕，並可同時產生「原始碼區塊」與「預覽容器」。這避免了發佈後再調整的成本，也確保跨文章的一致性與可維護性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q1, A-Q5, B-Q3

A-Q10: 什麼是 HTML 實體編碼？

• A簡: 將如 <、>、& 轉為 <、>、& 等實體，避免被瀏覽器當作標記解析。
• A詳: HTML 實體編碼是將具語法意義的字元（例如 <、>、&、”）轉為對應的安全字串（如 <、>、&、"），使其以純文字呈現，而非被瀏覽器解析為標籤或屬性。這在展示 HTML 原始碼、教學或避免 XSS 風險時相當重要，也是 HTML 原始碼區塊能安全顯示的必要步驟。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, B-Q4, D-Q3

A-Q11: 為何張貼 HTML 要同時顯示原始與效果？

• A簡: 原始碼便於學語法，效果便於理解影響；雙軌呈現縮短學習與驗證距離。
• A詳: 單看原始碼難以直覺理解視覺影響；只看效果又不清楚語法來源。將兩者並呈可讓讀者快速建立「語法→畫面」的對應，提升教學效率，也讓作者容易逐段示例差異（如樣式、語意標籤）。外掛自動化產出雙內容，降低維護成本並避免不同步。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, A-Q6, B-Q2

A-Q12: 什麼是剪貼簿？在網頁中的角色？

• A簡: 剪貼簿是系統用來暫存複製資料的區域；網頁可在使用者同意下讀寫以便捷操作。
• A詳: 剪貼簿（Clipboard）是作業系統提供的暫存區，支援跨應用的複製與貼上。現代瀏覽器提供安全受控的 API，允許在使用者手勢與安全來源（多為 HTTPS）下進行讀寫。COPY CODE 便利用此能力，將程式碼片段快速存入剪貼簿，降低手動操作成本。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, B-Q1, D-Q4

A-Q13: 為何複製需要按鈕觸發？

• A簡: 出於安全設計，瀏覽器多要求用戶手勢才允許剪貼簿存取，按鈕提供合理觸發點。
• A詳: 為防止惡意網站未經同意竄改使用者剪貼簿內容，瀏覽器規範通常要求剪貼簿操作需在明確的使用者手勢之後（如 click）。因此，COPY CODE 以按鈕為界面，提供清楚可預期的行為與可及性，也方便呈現成功或失敗的即時回饋。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q9, D-Q1, D-Q4

A-Q14: 此外掛帶來的核心價值？

• A簡: 降低貼文與閱讀摩擦，標準化程式碼呈現，提升教學品質與部落格專業感。
• A詳: 透過一鍵複製與雙軌預覽，外掛同時改善作者與讀者體驗。它將重複性工作自動化、避免手動錯誤，並以一致的結構與樣式提升可維護性與專業感。對知識傳遞而言，這代表更快的理解、更高的複製成功率與更少的溝通成本。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q2, A-Q6

A-Q15: 更新動機與靈感來源？

• A簡: 感覺既有功能不足、參考 MSDN 的複製體驗，因而加入 COPY 與 HTML 預覽。
• A詳: 作者在使用原版 Code Formatter 一段時間後，發現僅有基礎框線與網站版差異不大，無法解決教學文章的兩個痛點：讀者複製不便與 HTML 示範需重複貼文。受 MSDN 一鍵複製啟發，便將 COPY CODE 與 HTML 預覽納入更新，聚焦於實用性與省時體驗。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q2, A-Q3, A-Q5

A-Q16: 適用的典型場景有哪些？

• A簡: 程式碼教學、API 範例、HTML/CSS 示範、部落格技術筆記與文件型內容。
• A詳: 任何需要展示可複製程式碼與可視化結果的內容都適合此外掛。例如語法教學、演算法示範、框架用法、HTML/CSS 排版比較、常見錯誤與修正等。COPY CODE 提升複用效率；HTML PREVIEW 讓學習快速對比前後，尤其適合以範例驅動的文章結構。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q1, C-Q2, D-Q2

A-Q17: 有哪些潛在限制與風險？

• A簡: 瀏覽器權限限制、行動裝置相容性、安全性（XSS/CSP）、平台可能剝除腳本。
• A詳: 剪貼簿 API 常需 HTTPS 與使用者手勢；部分行動瀏覽器支援度不一。HTML 預覽需防範腳本執行與樣式外洩，遵循 CSP 與白名單策略。某些平台會移除內嵌腳本或不允許自訂標籤，導致按鈕失效。需設計退化機制、隔離樣式與安全編碼，並充分測試相容性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q11, D-Q6, D-Q10

A-Q18: 與語法高亮工具如何互補？

• A簡: 高亮負責視覺語法標示，此外掛補上複製與預覽體驗，兩者組合更完整。
• A詳: 語法高亮（如 Prism、Highlight.js）讓程式碼更易讀，但未必內建一鍵複製與 HTML 雙軌預覽。外掛能在產生結構時，與高亮工具協同運作：保留語法裝飾供閱讀，同時提供只取純文字的複製來源，並另建預覽容器呈現渲染效果，避免互相干擾。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q5, B-Q6, C-Q5

Q&A 類別 B: 技術原理類

B-Q1: COPY CODE 的運作機制是什麼？

• A簡: 由按鈕觸發，取得目標區塊純文字，透過剪貼簿 API 或相容方法寫入剪貼簿。
• A詳: 原理包含三步：一是事件觸發（使用者點擊按鈕）；二是擷取內容（從對應 pre/code 區塊取 textContent，避免夾帶標記與行號）；三是寫入剪貼簿（優先使用 navigator.clipboard.writeText，失敗時退回選取+execCommand(‘copy’)）。核心組件含事件處理器、內容擷取器與相容性層，並提供成功/失敗回饋。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q3, A-Q13, C-Q4, D-Q4

B-Q2: HTML PREVIEW 的流程與架構如何設計？

• A簡: 同段內容同時輸出編碼後原始碼與渲染容器，並以樣式與安全策略隔離。
• A詳: 流程為：1) 將 HTML 原始碼轉為實體編碼後置於 code 區塊；2) 另建預覽容器（div/iframe）渲染原文；3) 將樣式限定於容器內，避免外溢；4) 禁用或過濾危險標籤/屬性。核心組件包含編碼器、預覽容器、樣式隔離與安全過濾器，確保展示與實際效果一致且安全。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q5, A-Q10, B-Q11, C-Q2

B-Q3: 外掛如何注入按鈕與標記？

• A簡: 在編輯或發佈階段，為程式碼區塊生成標準結構並插入按鈕與必要屬性。
• A詳: 外掛攔截內容產生流程，將程式碼以預定模板包裝（如 figure > pre > code），並於相鄰處注入「Copy」按鈕，透過 data- 屬性綁定目標區塊。發佈時亦可加入必要的 JS/CSS。核心在於模板化輸出、可識別目標的選擇器與輕量腳本初始化。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, C-Q8, C-Q9

B-Q4: 如何處理 HTML 實體編碼與解碼？

• A簡: 展示原始碼時需轉義特殊字元；預覽時使用原文渲染，避免雙重編碼。
• A詳: 將 <、>、&、” 等字元轉為對應實體以文字呈現，避免被解析。預覽區則需使用未轉義原文，否則無法正確渲染。流程上，應保留兩份來源或於發佈階段同時產出兩種表示，並防止重複轉義。核心為可靠的轉義函式與一致的資料流。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q10, A-Q5, D-Q3

B-Q5: 代碼區塊推薦的 DOM 結構是什麼？

• A簡: 採用 figure/figcaption 包裹 pre/code，便於加註標題、按鈕與樣式控制。
• A詳: 常見結構為 figure.code-block + figcaption（標題與按鈕）+ pre > code（內容）。此結構語意清晰、易於選取目標元素、也利於無障礙與樣式掛載。可搭配 data-lang 指示語言、aria-label 供可及性宣告，並於 figcaption 放置 Copy 按鈕與狀態提示。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q1, C-Q1, C-Q5

B-Q6: 如何只複製純文字，不含標記與行號？

• A簡: 以 textContent 擷取內容，或從隱藏的原始資料來源複製，避開渲染裝飾。
• A詳: 若使用語法高亮或行號插件，innerHTML 會含標籤；應以 textContent 取字面值，或預先維護一份「乾淨原文」於 data- 屬性或隱藏元素中供複製。另可在複製前移除行號節點，或將行號置於不同容器避免被選取。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q3, D-Q2, C-Q7

B-Q7: 跨瀏覽器相容性如何確保？

• A簡: 優先 Clipboard API，提供 execCommand 後備與選取法，並檢測特性選路徑。
• A詳: 透過特性偵測決定路徑：navigator.clipboard（需 HTTPS 與手勢）→ document.execCommand(‘copy’) → 退化為自動選取＋提示手動複製。行動裝置需測試選取與焦點行為。包裝成相容性層，統一回傳結果與錯誤碼，便於 UI 回饋與遙測。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q1, C-Q4, D-Q4

B-Q8: 與編輯器/Markdown 的整合方式？

• A簡: 以自訂短碼或過濾器將程式碼轉模板，發佈時輸出按鈕與預覽所需標記。
• A詳: 在 Markdown/編輯器內保留自然書寫（``` 與語言標記），由外掛於轉換階段識別代碼區塊，替換為標準模板並插入 Copy 按鈕與預覽容器。HTML 範例可使用自訂短碼包裹，以生成雙軌輸出，兼顧可讀與可維護性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q3, C-Q9, B-Q3

B-Q9: 按鈕事件與使用者手勢有何限制？

• A簡: 多數瀏覽器要求手勢觸發剪貼簿操作，且可能受焦點、權限與來源限制影響。
• A詳: 事件需直接綁定 click/touchend 等手勢；不可在非手勢回呼中延後執行。剪貼簿 API 常需 HTTPS 與頁面可見狀態；部分情境需權限。應設計同步流程、避免 setTimeout 延後呼叫，並提供失敗提示與替代方案。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q13, D-Q1, D-Q4

B-Q10: 預覽區的 CSS 隔離與樣式設計？

• A簡: 使用封裝容器、命名空間或 Shadow DOM，限制樣式作用域避免汙染。
• A詳: 將預覽內容置於具命名空間的容器（如 .html-preview），只在容器下套用樣式；或採用 Shadow DOM 封裝；亦可用 iframe 完全隔離。需考量負載、互動需求與可維護性，避免全域樣式干擾或被干擾，確保展示穩定一致。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q5, D-Q5, C-Q6

B-Q11: 安全設計：如何避免惡意 HTML/Script？

• A簡: 過濾危險標籤與屬性、禁用腳本、遵循 CSP，必要時以 iframe sandbox 隔離。
• A詳: 對預覽內容進行白名單過濾（允許有限標籤/屬性），禁用事件屬性與內嵌 JS。設定 CSP 限制 script/style 來源；若需高強度隔離，使用 sandboxed iframe（如 sandbox、allow-scripts 規劃）。同時避免將使用者輸入直通渲染管線以防 XSS。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q17, D-Q10, C-Q6

B-Q12: 如何設計回饋 UI 與可用性？

• A簡: 顯示複製成功/失敗提示、ARIA 無障礙標註、鍵盤可操作與焦點管理。
• A詳: 按鈕需具備明確文字與 aria-label；複製後顯示短暫狀態（如「已複製」），失敗則給出指引。支援鍵盤操作（Enter/Space）、合理的焦點次序，並對螢幕閱讀器友好。這些細節提升整體易用性與可及性，減少誤操作。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q4, D-Q1, C-Q5

B-Q13: 多段程式碼的效能優化？

• A簡: 延遲初始化按鈕、事件委派、僅在可見時綁定，提高渲染與互動效能。
• A詳: 若頁面含多個區塊，避免逐一綁定大量事件。採用事件委派至容器、IntersectionObserver 在進入視窗時初始化、批次操作 DOM。資源（CSS/JS）合併與延遲載入，可進一步減少首屏負擔並提升互動順暢度。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q1, C-Q5, D-Q8

B-Q14: 無障礙設計與國際化考量？

• A簡: 支援鍵盤、螢幕閱讀器、對比度模式與多語系按鈕文案，增進普適性。
• A詳: 以語意化按鈕、適當 aria-* 屬性、可見焦點指示與足夠對比確保可達性。文案以 data- 屬性或字典配置支援國際化，根據語系切換「複製」文字。測試高對比與縮放情境，確保不同使用者皆可順利操作。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q5, D-Q8, A-Q16

B-Q15: 退化設計與替代方案如何規劃？

• A簡: 在 API 不可用時提供選取高亮＋提示，保留基本可用性，並告知限制。
• A詳: 設計三層能力：Clipboard API → execCommand → 手動選取。當退化到手動選取時，自動選中文本並顯示提示（如「按 Ctrl/Cmd+C 複製」）。同時保留可見的複製圖示與鍵盤支持，維持一致操作心智模型。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, C-Q4, D-Q4

B-Q16: 發佈流程中的轉換點怎麼設計？

• A簡: 在發佈/建置階段將代碼區塊轉模板，插入按鈕、預覽與資源引用。
• A詳: 於離線編輯到上線的管線中，選定一個穩定節點進行內容轉換（如存檔、編譯、部署前）。此時將 Markdown/HTML 代碼區塊轉為標準結構，注入按鈕與預覽所需的標記與 class，並確保必要 JS/CSS 被正確打包與加載。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q3, C-Q8, C-Q9

B-Q17: 如何測試這兩項功能？

• A簡: 單元測試轉義與擷取、端對端測試按鈕互動、跨瀏覽器與裝置實測。
• A詳: 單元測試涵蓋：HTML 轉義/還原、純文字擷取去行號、模板輸出一致性。E2E 測試驗證：按鈕狀態、剪貼簿寫入回饋、退化路徑提示。手動實測主要瀏覽器與 iOS/Android，涵蓋深色模式、縮放、讀屏器等情境，確保一致體驗。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: D-Q1, D-Q2, D-Q4

B-Q18: 與伺服器端高亮或靜態站產器協作？

• A簡: 由產器輸出高亮標記，外掛負責複製與預覽層；或以插件在建置時一次完成。
• A詳: 若使用伺服器端高亮（如 Rouge），可保留其輸出結構，僅在建置階段附加 Copy 與 Preview 所需標記與資源。於 Jekyll/Hugo 以插件/過濾器插入模板與資料屬性，讓兩者各司其職，避免重複處理與相互干擾。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q9, A-Q18, B-Q5

Q&A 類別 C: 實作應用類

C-Q1: 如何在部落格加入 COPY CODE 按鈕？

• A簡: 為每個 pre/code 注入按鈕並綁定複製邏輯，使用 Clipboard API 與後備選項。
• A詳:
  • 步驟: 1) 為每個 pre>code 外層包 figure，加入按鈕。2) 綁定 click 事件，取得相鄰 code 的 textContent。3) 優先使用 navigator.clipboard.writeText，失敗改用選取＋execCommand。4) 顯示成功/失敗提示。
  • 程式碼:

    btn.addEventListener('click', async () => {
      const text = code.textContent;
      try { await navigator.clipboard.writeText(text); toast('已複製'); }
      catch { selectText(code); document.execCommand('copy'); }
    });
    

  • 注意: 需 HTTPS、手勢觸發、提供退化提示與可及性標註。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q1, B-Q7, D-Q4

C-Q2: 如何在文章加入 HTML 預覽框？

• A簡: 同時輸出編碼後原始碼與渲染容器，並以類名隔離樣式與內容。
• A詳:
  • 步驟: 1) 取得 HTML 原文。2) 轉義後放入 pre>code。3) 將原文放入 .html-preview 容器。4) 套用容器專屬樣式。
  • 程式碼:

    <figure>
      <pre><code>&lt;h3&gt;這是H3&lt;/h3&gt;</code></pre>
      <div class="html-preview"><h3>這是H3</h3></div>
    </figure>
    

  • 注意: 過濾危險標籤、避免全域樣式干擾，必要時用 iframe 隔離。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q2, B-Q10, B-Q11

C-Q3: Markdown 中如何同時顯示 HTML 原始碼與預覽？

• A簡: 使用三引號包原始碼並轉義，另以原生 HTML 區塊放入預覽容器。
• A詳:
  • 步驟: 1) 在 Markdown 用 ```html 圍出原始碼（已轉義）。2) 於下一段插入 <div class="html-preview"> 原文。3) 以樣式限制範圍。
  • 片段:

    ```html
    <h3>標題</h3>
    

    標題

    ```

  • 注意: 某些平台會淨化 HTML，確認白名單或改用短碼。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q8, D-Q6, C-Q2

C-Q4: 如何實作複製的相容性後備？

• A簡: 以特性偵測選路徑，失敗時自動選取文字並提示使用快捷鍵複製。
• A詳:
  • 步驟: 1) if (navigator.clipboard) → writeText。2) else 嘗試 execCommand(‘copy’)。3) 失敗→選取 code 並顯示提示。
  • 程式碼:

    async function copy(text, el) {
      if (navigator.clipboard) return navigator.clipboard.writeText(text);
      const r = document.createRange(); r.selectNodeContents(el);
      const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r);
      const ok = document.execCommand('copy'); if (!ok) alert('請按 Ctrl/Cmd+C');
    }
    

  • 注意: 清理選取、避免影響閱讀。提供 ARIA live 區宣告狀態。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q7, B-Q15, D-Q4

C-Q5: 如何客製按鈕文案與樣式？

• A簡: 以 CSS 調整樣式、用 data- 屬性或字典配置文案，支援多語與高對比模式。
• A詳:
  • 步驟: 1) 為按鈕加 class。2) 用 CSS 決定外觀與焦點樣式。3) 以 data-i18n 或設定檔載入不同語系。
  • 程式碼:

    .btn-copy{padding:.25rem .5rem;border:1px solid;cursor:pointer}
    .btn-copy:focus{outline:2px solid #00f}
    

  • 注意: 提供 aria-label、狀態切換（如「已複製」）、對比度符合 WCAG。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q12, B-Q14, D-Q8

C-Q6: 如何防止預覽樣式污染整頁？

• A簡: 以命名空間類名、Shadow DOM 或 iframe 封裝，將 CSS 侷限在容器內。
• A詳:
  • 步驟: 1) 外層 <div class="html-preview">。2) CSS 僅在 .html-preview 下生效。3) 若需強隔離，採 Shadow DOM/iframe。
  • 片段:

    .html-preview h3{margin:.5rem 0}
    .html-preview *{box-sizing:border-box}
    

  • 注意: 如果用 iframe，處理高度自適應與資源載入，並設定 sandbox 屬性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q10, B-Q11, D-Q5

C-Q7: 複製時如何去除行號或提示字？

• A簡: 將行號置於獨立容器，複製時從純文本來源或過濾節點後再輸出。
• A詳:
  • 步驟: 1) 行號用 包裹。2) 複製時 clone 節點並刪除 .ln，或直接用原始文本來源。
  • 程式碼:

    function getCleanText(code){
      const clone = code.cloneNode(true);
      clone.querySelectorAll('.ln').forEach(n=>n.remove());
      return clone.textContent;
    }
    

  • 注意: 避免隱藏字元與雙空白，統一換行符號（\n）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, D-Q2, C-Q1

C-Q8: 在 Live Writer 外掛中掛載此兩功能？

• A簡: 於外掛發佈管線插入模板、資源與事件初始化，確保上線後可正常運作。
• A詳:
  • 步驟: 1) 偵測代碼區塊，輸出標準 figure/pre/code + 按鈕。2) HTML 範例輸出雙軌結構。3) 注入 JS/CSS 連結與初始化腳本。4) 測試發佈平台是否剝除腳本。
  • 注意: 提供無腳本退化方案、避免與平台淨化規則衝突。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q3, B-Q16, D-Q6

C-Q9: 在 Jekyll/Hugo 等靜態站如何實作？

• A簡: 以插件/過濾器在建置時轉換短碼或代碼區塊，輸出按鈕與預覽結構。
• A詳:
  • 步驟: 1) 定義短碼（如 previewhtml）。2) 過濾器將 Markdown 代碼區塊轉模板。3) 併入全站 JS/CSS。4) 部署測試。
  • 片段（Jekyll Liquid）:

    {​% include codeblock.html code=page.code lang="html" preview=true %​}
    

  • 注意: 與語法高亮器協同、避免雙重轉義與樣式衝突。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q18, B-Q8, C-Q2

C-Q10: 為中文內容優化排版與可讀性？

• A簡: 設定字型與行高、保留空白與換行、使用等寬字型與合適對比提升閱讀。
• A詳:
  • 步驟: 1) code 區使用等寬字型。2) 設置 white-space: pre。3) 提升行高與字距。4) 中文內容預覽設定系統字型。
  • 程式碼:

    pre code{font-family:ui-monospace,Consolas,monospace;white-space:pre;line-height:1.6}
    .html-preview{font-family:system-ui,'Noto Sans CJK',sans-serif}
    

  • 注意: 確保高對比與良好折行策略，支援深色模式。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q14, C-Q6

Q&A 類別 D: 問題解決類

D-Q1: 按下 COPY CODE 無反應怎麼辦？

• A簡: 多為手勢或權限問題。確認 HTTPS、手勢觸發與相容性後備，再檢查主控台錯誤。
• A詳:
  • 症狀: 點擊按鈕無任何複製或提示。
  • 可能原因: 非 HTTPS、未在手勢回呼中操作、瀏覽器不支援或被政策阻擋。
  • 解決: 改用 HTTPS；確保程式在 click 回呼立即呼叫 API；加入 execCommand 後備；提供手動選取提示。
  • 預防: 實作特性偵測、遙測錯誤、顯示清楚回饋。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, B-Q9, C-Q4

D-Q2: 複製內容夾帶行號或 HTML 標記？

• A簡: 改用 textContent 或乾淨來源，或在複製前移除行號節點，避免使用 innerHTML。
• A詳:
  • 症狀: 貼上後混入行號或 。
  • 原因: 從渲染高亮的 DOM 擷取 innerHTML。
  • 解決: 使用 textContent；或維護原文來源；複製前剔除 .ln 等裝飾節點。
  • 預防: 區分展示與複製資料源，統一從乾淨來源擷取。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, C-Q7, C-Q1

D-Q3: HTML 預覽不出現或亂碼怎麼辦？

• A簡: 檢查是否重複轉義或未轉義、容器是否正確、平台是否淨化內容。
• A詳:
  • 症狀: 預覽空白、顯示 <h3> 原字或破版。
  • 原因: 雙重轉義/未轉義、白名單過嚴、DOM 結構錯誤。
  • 解決: 分離「展示」與「預覽」來源；調整過濾與白名單；修正容器結構與樣式。
  • 預防: 建置時自動化轉換與測試，避免人工失誤。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, B-Q2, C-Q2

D-Q4: 出現 navigator.clipboard 未定義錯誤？

• A簡: 啟用 HTTPS、改用 execCommand 後備或手動選取，並給予明確提示。
• A詳:
  • 症狀: 主控台報錯 undefined。
  • 原因: 非安全來源或舊版瀏覽器不支援。
  • 解決: 以 HTTPS 提供頁面；加上 execCommand 方案；提供選取＋快捷鍵提示。
  • 預防: 特性偵測與分支、相容性文件與使用者指引。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, C-Q4, A-Q12

D-Q5: 預覽樣式干擾文章整體風格？

• A簡: 使用命名空間、Shadow DOM 或 iframe 隔離；檢查全域選擇器與重置樣式。
• A詳:
  • 症狀: 文章其他元素被預覽樣式影響或反之。
  • 原因: 全域 CSS 或選擇器過於寬鬆。
  • 解決: 限定 .html-preview 前綴；或改用 Shadow DOM/iframe；審視並縮小選擇器範圍。
  • 預防: 建立樣式命名規範與測試用例。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q10, C-Q6, A-Q7

D-Q6: 發佈後按鈕失效（腳本被移除）？

• A簡: 平台淨化政策移除內嵌腳本。改用外部 JS、平台白名單或建置期注入。
• A詳:
  • 症狀: 本機測試正常，上線後按鈕不動作。
  • 原因: CMS/平台剝除 script 或事件屬性。
  • 解決: 外掛於建置時注入外部資源；調整 CSP 與白名單；改用事件委派初始化。
  • 預防: 了解平台規則、避免內嵌腳本、提供退化方案。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q16, C-Q8, C-Q9

D-Q7: 行動裝置無法複製怎麼辦？

• A簡: 改善觸控事件、聚焦選取區、提供手動長按指引與相容性後備。
• A詳:
  • 症狀: 手機點擊無複製或選取異常。
  • 原因: 觸控事件差異、API 支援不足、焦點管理問題。
  • 解決: 綁定 touchend；確保元素可聚焦；提供選取與提示；測試主流行動瀏覽器。
  • 預防: 行動優先測試與遙測，追蹤失敗率。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q7, B-Q12, C-Q4

D-Q8: 按鈕不可見或被擋（如廣告阻擋）？

• A簡: 調整 z-index 與位置、避免易被過濾的關鍵字類名、提供備援入口。
• A詳:
  • 症狀: 按鈕被遮住或被擋廣告擴充封鎖。
  • 原因: 疊層順序/樣式問題、類名觸發阻擋規則。
  • 解決: 提升 z-index、改名避開「ad」等字、提供右鍵選單或工具列備援。
  • 預防: 在常見擴充套件環境下測試外觀與可用性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q5, B-Q13, B-Q14

D-Q9: 複製後空白與換行亂掉？

• A簡: 統一使用 textContent、設定 white-space: pre，並正規化換行符為 \n。
• A詳:
  • 症狀: 貼上後多空白或少換行。
  • 原因: HTML 渲染壓縮空白、不同平台換行符差異。
  • 解決: 以 textContent 擷取；在複製前將 \r\n 正規化為 \n；在顯示端維持 white-space: pre。
  • 預防: 測試跨平台貼上結果、避免從 innerHTML 擷取。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q6, C-Q1, C-Q10

D-Q10: 安全掃描通報內嵌腳本風險？

• A簡: 以外部檔案載入 JS、套用 CSP、移除行內事件，並對預覽內容做白名單過濾。
• A詳:
  • 症狀: 安規工具標示 inline script、事件屬性或未過濾 HTML。
  • 原因: 內嵌腳本、寬鬆的 HTML 允許策略。
  • 解決: 移至外部 JS；設定嚴格 CSP（nonce/hash/域名）；清除 on* 事件；淨化預覽內容。
  • 預防: 安全審查流程、定期掃描、文件化安全基線。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: B-Q11, C-Q6, B-Q16

學習路徑索引

• 初學者：建議先學習哪 15 題
  • A-Q1: 什麼是 Code Formatter 外掛？
  • A-Q2: 這次更新加入了哪些功能？
  • A-Q3: 什麼是 COPY CODE 功能？
  • A-Q5: 什麼是 HTML PREVIEW？
  • A-Q6: 為什麼需要 HTML 預覽？
  • A-Q7: 程式碼區塊與 HTML 預覽的差異？
  • A-Q10: 什麼是 HTML 實體編碼？
  • A-Q12: 什麼是剪貼簿？在網頁中的角色？
  • A-Q13: 為何複製需要按鈕觸發？
  • A-Q14: 此外掛帶來的核心價值？
  • C-Q2: 如何在文章加入 HTML 預覽框？
  • C-Q3: Markdown 中如何同時顯示 HTML 原始碼與預覽？
  • C-Q5: 如何客製按鈕文案與樣式？
  • D-Q1: 按下 COPY CODE 無反應怎麼辦？
  • D-Q3: HTML 預覽不出現或亂碼怎麼辦？
• 中級者：建議學習哪 20 題
  • B-Q1: COPY CODE 的運作機制是什麼？
  • B-Q2: HTML PREVIEW 的流程與架構如何設計？
  • B-Q3: 外掛如何注入按鈕與標記？
  • B-Q4: 如何處理 HTML 實體編碼與解碼？
  • B-Q5: 代碼區塊推薦的 DOM 結構是什麼？
  • B-Q6: 如何只複製純文字，不含標記與行號？
  • B-Q7: 跨瀏覽器相容性如何確保？
  • B-Q8: 與編輯器/Markdown 的整合方式？
  • B-Q9: 按鈕事件與使用者手勢有何限制？
  • B-Q10: 預覽區的 CSS 隔離與樣式設計？
  • B-Q12: 如何設計回饋 UI 與可用性？
  • B-Q13: 多段程式碼的效能優化？
  • B-Q14: 無障礙設計與國際化考量？
  • B-Q15: 退化設計與替代方案如何規劃？
  • B-Q16: 發佈流程中的轉換點怎麼設計？
  • B-Q18: 與伺服器端高亮或靜態站產器協作？
  • C-Q1: 如何在部落格加入 COPY CODE 按鈕？
  • C-Q4: 如何實作複製的相容性後備？
  • C-Q6: 如何防止預覽樣式污染整頁？
  • D-Q2: 複製內容夾帶行號或 HTML 標記？
• 高級者：建議關注哪 15 題
  • A-Q17: 有哪些潛在限制與風險？
  • A-Q18: 與語法高亮工具如何互補？
  • B-Q10: 預覽區的 CSS 隔離與樣式設計？
  • B-Q11: 安全設計：如何避免惡意 HTML/Script？
  • B-Q13: 多段程式碼的效能優化？
  • B-Q14: 無障礙設計與國際化考量？
  • B-Q16: 發佈流程中的轉換點怎麼設計？
  • B-Q17: 如何測試這兩項功能？
  • C-Q7: 複製時如何去除行號或提示字？
  • C-Q8: 在 Live Writer 外掛中掛載此兩功能？
  • C-Q9: 在 Jekyll/Hugo 等靜態站如何實作？
  • D-Q4: 出現 navigator.clipboard 未定義錯誤？
  • D-Q5: 預覽樣式干擾文章整體風格？
  • D-Q6: 發佈後按鈕失效（腳本被移除）？
  • D-Q10: 安全掃描通報內嵌腳本風險？