Qik-hypermd-fork NPM

HyperMD

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

Quickstart

// 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

Start Development

# Install packages
npm run dev_init

# Run demo page
npm run dev

# Run test
npm run test

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

Use PowerPacks to integrate 3rd-party libs and services on-the-fly
- MathJax, marked, KaTeX and more.
- Read the list
HyperMD functions are highly modulized

🎹 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

🌟 Sponsors

🙏 Sponsors (sorted by date)

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!

^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.