ultramd

HyperMD

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

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 ^4
   • Emoji from shortname: :joy: => 😂 (support custom emoji)
   • #hashtag support ^6 , 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 ^2
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 ^3
7. Upload Images and files via clipboard, or drag'n'drop
8. Power Packs integrate 3rd-party libs and services on-the-fly
   • MathJax, marked, KaTeX and more.
   • Read the list
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...
    • Examples
    • Documentation

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:

• Fork on GitHub , create your amazing themes and add-ons.
• Buy me a Coffee
• Spread HyperMD to the world!

---