Markdown 手札

找到三套Markdown實作模組。紀錄以未來參考。on 2021-02-19。Rich Text Editor, 圖文編輯器, WYSIWYG

前言

想實作一套專業的Markdown編輯工具比想像的要做更多的事。其編輯介面與渲染引擎的在找到的幾個方案都是各別獨立的系列。故以系列來整理。

react-markdown-editor-lite + markdown-it 系列

• react-markdown-editor-lite

  • 為React設計的Markdown 編輯介面。

  • 可再搭配各種 markdown-it-plugin 增強功能。

  • 實際使用還滿適用編寫正式的圖文並茂的文件，然仍要客製化調校一些 markdown-it-plugin，如：Link, Code, Image 等 ，不然就是有〝差那麼一點點〞的感覺。(註：其它方案在經驗上都有此狀況)。請參考：於Markdown文件highlight程式語言。

• markdown-it

  • Markdown 渲染引擎

  • 已知最受歡迎的 markdown 渲染引擎。

  • 有最成熟的各種類 markdown-it-plugin。

• markdown-it-plugin (已用過的)

  • markdown-it-checkbox

  • markdown-it-link-attributes

  • markdown-it-linkify-images

  • highlight.js

    • 增強<code/>

  • markdown-it-imsize (應該有用過吧？先記下再說)

react-mde + showdown 系列

• react-mde

  • 為React設計的Markdown 編輯介面

  • 從文件說明與demo來評估，推論適合討論區的簡單訊息來回應用。文字為主再加上一點強化修飾。

  • 可改引用 react-markdown 做 generateMarkdownPreview 的參數以預覽。

• showdown

  • markdown 渲染引擎。

react-markdown

• 為React設計，只能渲染顯示Markdown。

• 渲染引擎：remark-gfm。