A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Clone or download
Latest commit adf3d3d Oct 7, 2018

README.md

HyperMD

HyperMD Markdown Editor

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

NPM version Build Status

Online Demo | Examples | Documentation

中文介绍

Quickstart

// 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: => 😂 (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

Contributing

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.