HyperMD Save

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

Project README


HyperMD Markdown Editor

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

NPM version Build Status

Online Demo | Examples | Documentation



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

Remix on Glitch

Also for RequireJS, Parcel, webpack, plain browser env. Read the Doc

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.

🌈 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]
    • TODO List (the box is clickable)
    • YAML Front Matter
    • $\LaTeX$ Formula, inline or block display mode [^4]
    • Emoji: :joy: => :joy: (also support custom emoji)
  • And more
    • HTML in Markdown -- WYSIWIG MDX is possible
    • #hashtag support [^6] , see demo
    • Flowchart and Diagrams (mermaid or flowchart.js)

πŸ’ͺ Better Markdown-ing Experience

  • Upload Images and files via clipboard, or drag'n'drop
  • Alt+Click to open link / jump to footnote [^1]
  • Hover to read footnotes
  • Copy and Paste, translate HTML into Markdown [^5]
  • Easy and ready-to-use Key-bindings (aka. KeyMap)

🎁 CodeMirror benefits

  • Syntax Highlight for code blocks, supports 120+ languages[^2]. Mode can be loaded on-demand.
  • Configurable key-bindings
  • Diff and Merge
  • Themes [^3]
  • Almost all of CodeMirror addons!

πŸ”¨ Extensible and Customizable

🎹 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

Special Thanks

πŸ’Ž 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)

β˜•Phithon β˜•c*i β˜•*Yuan β˜•*Xiuzhang β˜•*Junjie πŸŒŸεœ†δΌžη§‘ζŠ€ β˜•*Di


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.

Open Source Agenda is not affiliated with "HyperMD" Project. README Source: laobubu/HyperMD
Open Issues
Last Commit
2 years ago

Open Source Agenda Badge

Open Source Agenda Rating