Breaks the Wall between writing and preview, in a Markdown Editor.
Online Demo | Examples | Documentation
// npm install --save hypermd codemirror
var HyperMD = require('hypermd')
var myTextarea = document.getElementById('input-area')
var editor = HyperMD.fromTextArea(myTextarea)
Also for RequireJS, Parcel, webpack, plain browser env. Read the Doc
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.
Code
:joy:
=> :joy: (also support custom emoji)| column | line |
π Service and Resource
IcoMoon - The IconPack(Free Version) Demo Page uses IcoMoon icons. Related files are stored in demo/svgicon. |
CodeCogs - An Open Source Scientific Library FoldMath uses codecogs' service as the default TeX MathRenderer. (You may load PowerPack to use other renderer, eg. KaTeX or MathJax) |
SM.MS - A Free Image Hosting service Demo Page and PowerPack/insert-file-with-smms use SM.MS open API to upload user-inserted images. (If you want to integrate SM.MS service, use the PowerPack) |
EmojiOne - Open emoji icons Demo Page and PowerPack/fold-emoji-with-emojione use Emoji icons provided free by EmojiOne (free license) (You may use other alternatives, eg. twemoji from twitter) |
CodeMirror - In-browser code editor. RequireJS - A JavaScript AMD module loader. KaTeX - The fastest math typesetting library for the web. marked, turndown and more remarkable libs. |
π Sponsors
π Sponsors (sorted by date)
HyperMD is a personal Open-Source project by laobubu. Contributions are welcomed. You may:
[^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.