laobubu / HyperMD翻译 / 编辑






HyperMD Markdown Editor

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

Online Demo 中文介绍

Why use HyperMD?

HyperMD is a set of [CodeMirror] add-ons / modes / themes.

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

  1. Write, and preview on the fly
    • Strong, Emphasis, Strikethrough, Code
    • Links, Images, Footnotes
    • Block-quotes, code blocks
    • Headers
    • Horizontal Rules
    • Lists (nested, ordered, unordered, tasks with checkbox)
    • [MathJax] Formula, like $ e^{ i\pi } + 1 = 0 $ and math block [^4]
    • Simple Tables
  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. Code Block Highlighting language modes are loaded automatically
  8. Upload Images copy and paste, or drag'n'drop
  9. [And More...][doc]


[RequireJS] is recommended and used during developing HyperMD.

After importing related CSS files, [RequireJS], and other optional third-party libraries ([MathJax] etc...), you may copy and edit the initializing code from demo/index.js.

If you want to write <script> , <link> tags and import libs manually, Load these files in sequence, before initializing your editor:

  • CSS Styles ( see index.html )
  • JS Libs ( see demo/index.js )
    • Third-party libraries are optional, except [marked]

Once add-ons and stylesheets are loaded, you may initialize editor, turn your <textarea> into HyperMD editor, with few codes:

var myTextarea = document.getElementById('input-area')
var editor = HyperMD.fromTextArea(myTextarea)

And that's all. Configuration guide can be found in [doc].


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

[CodeMirror]: A powerful text editor for the browser. [RequireJS]: A JavaScript AMD module loader. [MathJax]: A display engine for mathematics. [marked]: A markdown parser and compiler. [turndown]: An HTML to Markdown converter [turndown-plugin-gfm]: Turndown plugin to add GitHub Flavored Markdown extensions [laobubu]: The author of HyperMD. [doc]: HyperMD Documentation

[^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 is just like code block. Use $$ to wrap your math expression. [^5]: Use Ctrl+Shift+V to paste plain text.