HyperMD

超級

在Markdown編輯器中打破寫作和預覽之間的牆。

在線演示|示例|文檔

中文介紹

Quickstart

 // npm install --save hypermd codemirror
var HyperMD = require ( 'hypermd' )
var myTextarea = document . getElementById ( 'input-area' )
var editor = HyperMD . fromTextArea ( myTextarea )

也適用於requirejs，包裹，webpack，普通瀏覽器env。閱讀文檔

為什麼使用HyperMD？

HyperMD是一組CodeMirror附加組件 /模式 /主題 /命令 / keymap等。

您可以在同一頁面上同時使用原始CodeMirror和HyperMD。

？寫，即時預覽

• 常規的降壓塊和元素
  • 強，重點，罷工， Code
  • 鏈接，圖像
  • title / Quote / code塊 /列表 /水平規則
• 降價擴展
  • 簡單表
  • 腳註¹
  • 待辦事項列表（盒子可單擊）
  • YAML前事
  • $ latex $公式，內聯或塊顯示模式²
  • 表情符號:joy: =>？ （也支持自定義表情符號）
• 還有更多
  • HTML在Markdown -Wysiwig MDX可能
  • #hashtag支持³ ，請參閱演示
  • 流程圖和圖表（美人魚或Flowchart.js）

？更好的宣傳體驗

• 通過剪貼板上傳圖像和文件，或Drag'n'Drop
• alt+單擊打開鏈接 /跳到腳註¹
• 懸停以閱讀腳註
• 複製和粘貼，將HTML轉換為Markdown ⁴
• 易於使用的鑰匙結合（又名Keymap）

？ codemirror益處

• 代碼塊的語法亮點，支持120多種語言⁵ 。模式可以按需加載。
• 可配置的鑰匙結合
• 差異和合併
• 主題⁶
• 幾乎所有的Codemirror插件！

？可擴展且可自定義

• 使用PowerPacks即時整合第三方LIB和服務
  • Mathjax，標記，Katex等。
  • 閱讀列表
• 高度函數高度調節

？量身定制的Keymap “ HyperMD”：

• 桌子
  • 輸入使用| column | line |
  • 輸入插入新行或完成表（如果最後一行為空）
  • 標籤或換檔以在單元格之間導航
• 列表
  • tab或shift-tab到縮進/不明智的當前列表項目
• 格式化附近的單詞（或選定的文本）
  • Ctrl+B粗體
  • Ctrl+我強調
  • Ctrl+D。罷工

特別感謝

？服務和資源

ICOMOON- iCONPACK（免費版本） 演示頁面使用Icomoon圖標。相關文件存儲在Demo/svgicon中。	Codecogs-開源科學庫 Foldmath使用Codecogs的服務作為默認的Tex Mathrenderer。 （您可以加載PowerPack使用其他渲染器，例如Katex或MathJax）
SM.MS-免費圖像託管服務 演示頁面和powerPack/insert-file-with-smms使用SM.MS OPEN API上傳用戶插入的圖像。 （如果您想集成SM.MS服務，請使用PowerPack）	表情符號- 開放表情符號圖標 演示頁面和PowerPack/fold-emoji-with-emojione使用表情符號圖標（免費許可證）免費提供 （您可以使用其他替代方案，例如Twitter的Twemoji）
codemirror-瀏覽器代碼編輯器。 requirejs- JavaScript AMD模塊加載程序。 Katex-網絡最快的數學排版庫。 標記，轉折和更引人注目的libs。

？贊助商

贊助商（按日期排序）

☕phithon☕C * i☕ * yuan☕ * xiuzhang☕

貢獻

HyperMD是Laobubu的個人開源項目。歡迎捐款。您可以：

• 在github上分叉，創建您的驚人主題和附加組件。
• 給我買咖啡
• 將HyperMD傳播到世界！

---

腳註

1. Ctrl+Click也有效，但是如果存在，將跳到腳註。 ^↩2

2. 數學塊使用$$包裝您的Tex表達式。 ↩

3. 默認情況下禁用，請參見DOC； #use兩個哈希符號＃如果標籤名稱包含空格。 ↩

4. 使用Ctrl+Shift+V到粘貼純文本。 ↩

5. 語言與CodeMirror支持一樣多。 ↩

6. 如果主題不是為HyperMD設計的，則可能不存在某些功能。 ↩