ahnan4arch / hypermd

WYSIWYG Markdown Editor for browsers. Breaks the Wall between writing and preview.

HyperMD

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

Online Demo

Why use HyperMD ?

HyperMD is a set of [CodeMirror] addons / 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 ¹
2. Alt+Click to follow link / footnote ²
3. Syntax Highlight for 120+ languages code blocks ³
4. Hover to read footnotes
5. Copy and Paste, translate HTML into Markdown
6. Massive CodeMirror Addons can be loaded, including:
   • VIM/Emacs mode and Configurable keybindings
   • Diff and Merge
   • Fullscren
   • Themes ⁴
7. And More...

Quickstart

[RequireJS] is recommended and used during developing HyperMD. You may just open index.js and copy partial code. Don't forget HTML <link> tags to the css files.

If you don't want to use [RequireJS], insert <script> , <link> and other tags manually. Load these files in sequence, before initializing your editor:

• CodeMirror:
  • codemirror.js and codemirror.css
  • addon/mode/overlay.js from CodeMirror
  • addon/edit/continuelist.js from CodeMirror
  • meta, xml, markdown, gfm modes from CodeMirror
  • (optional) other CodeMirror modes if you need code highlighting
• HyperMD:
  • mode/hypermd both js and css
  • all addons
  • theme you prefer ( eg. hypermd-light.css )

Once addons and stylesheets are loaded, you may initialize editor, turning your <textarea> into HyperMD editor, with few codes:

Note: This complex approach is temporary. but don't worry, Some easy-to-use functions (methods) will come in a new version.

var myTextarea = document.getElementById('input-area')
var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true,
    lineWrapping: true,
    theme: "hypermd-light",
    mode: "text/x-hypermd",

    gutters: [
        "CodeMirror-linenumbers",
        "HyperMD-goback"
    ],
    extraKeys: {
        "Enter": "newlineAndIndentContinueMarkdownList"
    },
    
    hmdHideToken: "(profile-1)",
    hmdCursorDebounce: true,
    hmdAutoFold: 200,
    hmdPaste: true,
    hmdFoldMath: { interval: 200, preview: true }
})

editor.hmdHoverInit()       // tooltips on footnotes
editor.hmdClickInit()       // click to follow links and footnotes 

And that's all. Feel free to modify the options above.

Contributing

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

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

---

[CodeMirror]: https://codemirror.net/ A powerful text editor for the browser. [RequireJS]: http://requirejs.org/ A JavaScript AMD module loader. [MathJax]: https://www.mathjax.org/ A JavaScript display engine for mathematics. [laobubu]: https://laobubu.net/ The author of HyperMD.

Footnotes

1. Math block is just like code block. Use $$ to wrap your math expression. ↩

2. Ctrl+Click works too, but will jump to the footnote if exists. ↩

3. Languages as many as CodeMirror supports. ↩

4. If the theme is not designed for HyperMD, some features might not be present. ↩