HyperMD

Breaks the Wall between writing and preview, in a Markdown Editor.

Online Demo | Examples | 中文介绍

Why use HyperMD?

HyperMD is a set of CodeMirror add-ons / modes / themes / commands / keymap etc.

You may use both original CodeMirror and HyperMD on the same page.

1. Write, and preview on the fly
   • Regular Markdown blocks and elements
     • Strong, Emphasis, ~~Strikethrough~~, Code
     • Links, Images
     • Title / Quote / Code Block / List / Horizontal Rule
   • Markdown Extension
     • Simple Table
     • Footnote [^1]
     • [x] TODO List (with clickable checkboxes)
     • YAML Front Matter
   • Inline $\LaTeX$ Formula, and multi-line math blocks [^4]
   • Emoji from shortname: :joy: => :joy: (support custom emoji)
   • #hashtag support [^6] , see demo
   • Flowchart and Diagrams (mermaid or flowchart.js)
2. Alt+Click to follow link / footnote [^1]
3. Syntax Highlight for 120+ languages code blocks [^2]
4. Hover to read footnotes
5. Copy and Paste, translate HTML into Markdown [^5]
6. Massive CodeMirror Add-ons can be loaded, including:
   • VIM/Emacs mode and Configurable keybindings
   • Diff and Merge
   • Fullscreen
   • Themes [^3]
7. Upload Images and files via clipboard, or drag'n'drop
8. Power Packs integrate 3rd-party libs and services on-the-fly
   • MathJax, marked, KaTeX and more.
   • Read the list
9. Tailored KeyMap "HyperMD":
   • Table
     • Enter Create a table with | column | line |
     • Enter Insert new row, or finish a table (if last row is empty)
     • Tab or Shift-Tab to navigate between cells
   • List
     • Tab or Shift-Tab to indent/unindent current list item
   • Formatting a nearby word (or selected text)
     • Ctrl+B bold
     • Ctrl+I emphasis
     • Ctrl+D ~~strikethrough~~
10. And More...
    • Examples
    • Documentation

Quickstart

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

If you use bundlers, that's all. CSS will be imported via "hypermd" javascript.

For RequireJS users and pure HTML lovers, please read QuickStart Section in Documentation!

To integrate other third-party libs and services, read PowerPacks

Special Thanks

💎 Service and Resource

🙏 Sponsors (sorted by date)

Contributing

HyperMD is a personal Open-Source project by laobubu. Contributions are welcomed. You may:

• Fork on GitHub , create your amazing themes and add-ons.
• Buy me a Coffee
• Spread HyperMD to the world!

[^1]: Ctrl+Click works too, but will jump to the footnote if exists. [^2]: Languages as many as CodeMirror supports. [^3]: If the theme is not designed for HyperMD, some features might not be present. [^4]: Math block use $$ to wrap your TeX expression. [^5]: Use Ctrl+Shift+V to paste plain text. [^6]: Disabled by default, see doc; #use two hash symbol# if tag name contains spaces.