/HyperMD

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

Primary LanguageTypeScriptMIT LicenseMIT

HyperMD

HyperMD Markdown Editor

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

NPM version Build Status

Online Demo | Examples | 中文介绍

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.

  1. 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 (with clickable checkboxes)
      • YAML Front Matter
    • Inline $\LaTeX$ Formula, and multi-line math blocks 2
    • Emoji from shortname: :joy: => 😂 (support custom emoji)
    • #hashtag support 3 , see demo
    • Flowchart and Diagrams (mermaid or flowchart.js)
  2. Alt+Click to follow link / footnote 1
  3. Syntax Highlight for 120+ languages code blocks 4
  4. Hover to read footnotes
  5. Copy and Paste, translate HTML into Markdown 5
  6. Massive CodeMirror Add-ons can be loaded, including:
    • VIM/Emacs mode and Configurable keybindings
    • Diff and Merge
    • Fullscreen
    • Themes 6
  7. Upload Images and files via clipboard, or drag'n'drop
  8. Power Packs integrate 3rd-party libs and services on-the-fly
  9. 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
  10. And More...

Quickstart

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

If you use bundlers, that's all. CSS will be imported via "hypermd" javascript.

For RequireJS users and pure HTML lovers, please read QuickStart Section in Documentation!

To integrate other third-party libs and services, read PowerPacks

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 (sorted by date)

☕Phithon ☕c*i ☕*Yuan

Contributing

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

Footnotes

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

  2. Math block use $$ to wrap your TeX expression. ↩

  3. Disabled by default, see doc; #use two hash symbol# if tag name contains spaces. ↩

  4. Languages as many as CodeMirror supports. ↩

  5. Use Ctrl+Shift+V to paste plain text. ↩

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