Code Formatter 更新: 複製CODE及HTML預覽
摘要提示
- 外掛更新動機: 作者覺得原版功能不足，為提升實用性而加上兩個小功能。
- COPY CODE: 參考 MSDN 範例區的設計，一鍵將程式碼複製到剪貼簿。
- 使用情境: 常貼程式碼的讀者可快速複製，減少手動選取的繁瑣。
- 範例展示: 以 C# 程式碼片段示範外掛顯示與複製按鈕的使用。
- HTML PREVIEW: 同步展示 HTML 原始碼與實際渲染結果，省去重複貼上的麻煩。
- 編寫流程優化: 寫 HTML 文章時不必切換到 HTML 模式再次貼同段內容。
- 顯示一致性: 透過外掛保持貼上程式碼的格式框與網站版本一致。
- 自用導向: 功能著重作者自身寫作習慣與效率提升。
- 發佈方式: 暫不打包公開，需要者可私下索取。
- 版本定位: 無重大突破，屬實用與輕量改良型更新。
全文重點
作者針對 Windows Live Writer 的 Code Formatter 外掛進行小幅度更新，補上兩個實用功能：COPY CODE 與 HTML PREVIEW。更新動機源於原版雖可用，但在寫作與教學實務中略顯不足，因此以自用為主的思維增加實際會用到的工具。COPY CODE 功能借鏡 MSDN 範例區，為每段程式碼提供一鍵複製按鈕，使用者按下後即可將整段程式碼快速複製到剪貼簿，避免手動框選可能造成的遺漏或格式錯亂，特別適合經常從文章複製程式碼到開發環境的讀者。文中以一段 C# 範例展示更新後貼文的呈現方式與操作流程。
另一項新增的 HTML PREVIEW 功能，針對在撰寫 HTML/CSS 相關文章時經常遇到的重工問題：同一段內容既要以原始碼形式顯示，又要讓讀者看到實際渲染結果。過去寫作需要切換到 HTML 編輯模式重貼一次，容易打斷節奏且耗時。更新後外掛可同時輸出 HTML 的原始碼區塊與對應的渲染預覽區塊，達到一次張貼、兩種呈現的效果，既保留技術細節也確保讀者能直觀看到結果。作者以多段 H3 例子示範預覽，並用帶框容器凸顯區塊。
整體而言，這次更新非為炫技或大改版，而是以「好用、減少重工」為核心，補齊寫作過程中最常碰到的兩個痛點。作者也坦言這是自用導向的調整，目前未正式打包釋出，若有人有需求可直接索取。此更新延續既有外掛的格式化與框線樣式，強化互動操作與即時呈現，提升部落格技術文章的讀寫體驗。
段落重點
前言：外掛微調的動機與方向
作者自述再次動手更新 Live Writer 的 Code Formatter 外掛，原因在於原本版本雖與網站側的顯示一致且「還不錯用」，但總覺得少了幾個關鍵便利性，特別是寫技術文時容易遇到的操作性痛點。此次更新不追求華麗或重大突破，而是聚焦「提升貼文與閱讀的效率與體驗」，以自用為出發點來補齊功能。整體風格延續原有樣式（例如外框、格式化呈現），並在此基礎上增加互動性的操作功能，旨在解決實務中的小困擾。
COPY CODE：一鍵複製程式碼到剪貼簿
此功能靈感來自 MSDN 範例區常見的 Copy 按鈕。實作後，每段以外掛張貼的程式碼區塊都會附上一個「COPY CODE」按鈕，讀者一鍵即可將內容複製到剪貼簿。這對常需要把部落格範例拷貝到 IDE 或測試環境的讀者格外實用，省去手動框選的麻煩，也避免因選取不全或縮排破壞而導致錯誤。作者以 C# 範例展示效果，說明更新後的呈現方式與互動步驟。此改動雖小，但能顯著提升讀者操作效率，進而改善文章的可用性與易讀性。
HTML PREVIEW：同步展示原始碼與渲染結果
針對 HTML/CSS 文章常見的需求，作者新增「HTML PREVIEW」功能，讓同一段 HTML 內容同時以兩種形式顯示：上方是格式化後的 HTML 原始碼區塊，下方是實際渲染的預覽區塊（以帶框的 div 容器呈現）。這樣的設計解決了過去需要切換 HTML 編輯模式、重貼一次的重工流程，讓作者貼一次就能滿足教學與展示雙需求。文中用多個 H3 元素的例子示範效果，讀者可直接比對語法與產出結果，降低理解門檻，提升教學文章的表達力。
結語：實用導向的小更新與發佈方式
作者強調這次並非重大突破，而是為了自己與讀者更好用的微改版；重心在節省時間、減少重工與提升互動。外掛目前未正式打包上架，採「有需要再索取」的方式提供，維持輕量分享與快速迭代的彈性。整體更新延續既有的格式化樣式，新增的一鍵複製與 HTML 預覽則補上關鍵缺口，使技術文章的撰寫、展示與讀取流程更順暢、直覺且友善。
資訊整理
知識架構圖
- 前置知識：
- 基本部落格寫作與貼程式碼的需求理解
- Windows Live Writer（寫作工具）基本操作
- HTML/CSS 基礎與程式碼片段（Code Snippet）呈現方式
- 了解「剪貼簿」與「一鍵複製」的常見網頁互動模式
- 核心概念：
- 程式碼格式化：在部落格中以一致、可讀性高的樣式呈現程式碼
- 一鍵複製（Copy Code）：提供按鈕讓讀者快速把程式碼複製到剪貼簿
- HTML 預覽（HTML Preview）：同時展示 HTML 原始碼與實際渲染結果，避免重貼
- Live Writer 外掛整合：透過外掛在撰文階段即自動生成所需的格式與功能
- 使用者體驗提升：減少作者與讀者操作成本（少切換、少複製、少貼）
- 技術依賴：
- Windows Live Writer 外掛機制（產出貼文時的 HTML/樣式/腳本）
- 前端呈現：Syntax highlight/樣式框線、按鈕與區塊結構
- 剪貼簿存取：前端實作 Copy 行為（依環境可能用瀏覽器 API）
- HTML 渲染區塊：同貼原始碼與預覽區，保持同步
- 應用場景：
- 教學文章與技術分享：附上可一鍵複製的程式碼片段
- HTML/CSS 示範文：同時展示原始碼與渲染效果，縮短編輯流程
- 文件範例庫或筆記：快速複製、對照預覽的需求
- 內部團隊知識庫：降低讀者操作門檻、提升可重用性
學習路徑建議
- 入門者路徑：
- 了解為何需要程式碼格式化與一鍵複製
- 安裝並啟用 Live Writer 外掛（Code Formatter）
- 練習貼上簡單 C# 或 HTML 片段，使用 Copy Code 按鈕與 HTML Preview
- 進階者路徑：
- 自訂程式碼區塊樣式（字型、框線、配色）
- 熟悉外掛的產出 HTML 結構，調整版型相容性
- 研究不同瀏覽器或平台的複製機制差異，優化使用體驗
- 實戰路徑：
- 建立教學文範本：每段程式碼預設附 Copy Code 與（對 HTML 類型）附預覽
- 對多段示例進行一致化標記與樣式管理
- 收集讀者使用回饋（是否常用複製、預覽是否清楚）並迭代設定
關鍵要點清單
- 程式碼格式化區塊：以固定樣式與結構顯示程式碼，提升可讀性與一致性 (優先級: 高)
- Copy Code 按鈕：一鍵將程式碼複製到剪貼簿，降低讀者操作成本 (優先級: 高)
- HTML 原始碼展示：以安全方式顯示 HTML 字元（轉義）供閱讀 (優先級: 高)
- HTML 即時預覽：同文顯示原始碼與渲染結果，避免重複貼文流程 (優先級: 高)
- Live Writer 外掛整合：在撰文階段自動插入必要 HTML/樣式/功能 (優先級: 高)
- 使用情境對齊：針對教學與範例文最佳化（示例清楚、可複製） (優先級: 中)
- 樣式自訂：可調整框線、標題、字體與配色，符合站台風格 (優先級: 中)
- 瀏覽器相容性：確保 Copy 與預覽在常見瀏覽器能正常工作 (優先級: 中)
- 安全性與轉義：HTML 顯示需正確轉義，預覽區隔離於展示區 (優先級: 高)
- 編輯效率：減少「原始碼/預覽」雙重貼上與模式切換 (優先級: 高)
- 內容維護：外掛輸出的標記應容易維護與批次更新 (優先級: 中)
- 文件與說明：向讀者清楚標示「Copy Code」與「HTML Preview」用途 (優先級: 低)
- 範例一致性：以標準示例（如 C#、HTML）示範功能成效 (優先級: 低)
- 發布與取得：目前未打包公開，需要者可向作者索取 (優先級: 低)
- 靈感來源：參考 MSDN 的一鍵複製設計，驗證實用性 (優先級: 低)
