進階輸入

Markdown Editor|Markdown 編輯器

需要以純文字標記撰寫可版本控制內容時使用;來源與預覽都要可被清楚辨認。

常見俗稱:Markdown 編輯器、Markdown 輸入區、MD Editor、文字標記編輯器、Markdown Preview

60 秒決策

先確認使用者要完成的事。

適合使用

  • 撰寫者熟悉輕量文字標記,且內容需要純文字、版本控制或可攜性。
  • 來源碼與渲染後結果都需要被清楚檢視。

不適合使用

  • 主要使用者不認識 Markdown,也沒有學習它的理由。
  • 內容只是一小段沒有結構的純文字。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

來源與預覽要分得開

使用者應知道左邊在寫標記、右邊在看結果,不能讓兩種模式混在同一塊。

預覽是受限的渲染結果

預覽前要處理輸入與允許語法,不能把任意 HTML 當成可執行內容塞進頁面。

即時回饋維持可讀

字數、錯誤與預覽更新應幫助寫作,不要每輸入一個字就搶走焦點。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

撰寫來源

可直接看到 Markdown 語法與範例。

即時預覽

標題、粗體與清單等支援語法轉成可讀結果。

空白或語法未完成

保留輸入文字,預覽以安全且可理解方式處理。

提交前

明確說明會儲存原始 Markdown、渲染結果或兩者。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 技術公告 Markdown

    先觀察:來源、預覽與字數是否同時清楚,不必猜目前在哪一種模式。

    操作:修改標題、粗體文字或新增清單項目。

    預期結果:預覽安全更新;來源仍保持純文字且不會失去輸入焦點。

可操作 Demo

原始 Markdown 與安全預覽

支援標題、粗體與項目清單;右側是安全預覽。

目前 0 個字元。

預覽

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「技術公告」Markdown Editor。左側為可編輯 Markdown 來源,右側為即時安全預覽;支援標題、粗體與項目清單,並顯示目前字元數。明確標示來源與預覽,不能把 HTML 直接當成可執行內容插入預覽。

驗收清單

不要只確認欄位能不能點。

  • 來源與預覽是否有清楚名稱?
  • 預覽是否安全處理輸入?
  • 是否只支援任務需要的語法?
  • 字數與更新狀態是否易懂?
  • 讀者不熟 Markdown 時是否有合適替代方案?