HyperMD
Breaks the Wall between writing and preview, in a Markdown Editor.
Why use HyperMD ?
HyperMD is a set of [CodeMirror] addons / modes / themes. You may use both original CodeMirror and HyperMD on the same page.
- Write, and preview on the fly
- Alt+Click to follow link / footnote 2
- Syntax Highlight for 120+ languages code blocks 3
- Hover to read footnotes
- Massive CodeMirror Addons can be loaded, including:
- VIM/Emacs mode and Configurable keybindings
- Diff and Merge
- Fullscren
- Themes 4
- 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,
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.