HyperMD
HyperMD copied to clipboard
laobubu
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
HyperMD
Breaks the Wall between writing and preview, in a Markdown Editor.
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)
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
-
Strong, Emphasis, ~~Strikethrough~~,
-
Markdown Extension
- Simple Table
- Footnote [^1]
- [x] 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
-
Enter Create a table with
-
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)
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.
laobubu