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
• 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
  • <span style="color:red">HTML in Markdown</span> -- 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
  • <kbd>Enter</kbd> Create a table with | column | line |
  • <kbd>Enter</kbd> Insert new row, or finish a table (if last row is empty)
  • <kbd>Tab</kbd> or <kbd>Shift-Tab</kbd> to navigate between cells
• List
  • <kbd>Tab</kbd> or <kbd>Shift-Tab</kbd> to indent/unindent current list item
• Formatting a nearby word (or selected text)
  • <kbd>Ctrl+B</kbd> bold
  • <kbd>Ctrl+I</kbd> emphasis
  • <kbd>Ctrl+D</kbd> ~~strikethrough~~

Special Thanks

💎 Service and Resource

<table> <tr> <td width="50%"> <b><a href="https://icomoon.io/#icons-icomoon">IcoMoon</a></b> - The IconPack(Free Version)<br> <small> <em>Demo Page</em> uses IcoMoon icons. Related files are stored in <a href="https://github.com/laobubu/HyperMD/tree/master/demo/svgicon">demo/svgicon</a>. </small> </td> <td> <b><a href="http://www.codecogs.com">CodeCogs</a></b> - An Open Source Scientific Library<br> <small> <em>FoldMath</em> uses codecogs' service as the default TeX MathRenderer.<br> (You may load PowerPack to use other renderer, eg. KaTeX or MathJax) </small> </td> </tr> <tr> <td> <b><a href="https://sm.ms/">SM.MS</a></b> - A Free Image Hosting service<br> <small> <em>Demo Page</em> and <em>PowerPack/insert-file-with-smms</em> use SM.MS open API to upload user-inserted images.<br> (If you want to integrate SM.MS service, use the PowerPack) </small> </td> <td> <b><a href="https://www.emojione.com/">EmojiOne</a></b> - Open emoji icons<br> <small> <em>Demo Page</em> and <em>PowerPack/fold-emoji-with-emojione</em> use Emoji icons provided free by <a href="https://www.emojione.com/">EmojiOne</a> <a href="https://www.emojione.com/licenses/free"><em>(free license)</em></a><br> (You may use other alternatives, eg. twemoji from twitter) </small> </td> </tr> <tr> <td> <b><a href="https://codemirror.net/">CodeMirror</a></b> - In-browser code editor.<br> <b><a href="http://requirejs.org/">RequireJS</a></b> - A JavaScript AMD module loader.<br> <b><a href="https://khan.github.io/KaTeX/">KaTeX</a></b> - The fastest math typesetting library for the web.<br> <b><a href="https://github.com/chjj/marked/">marked</a></b>, <b><a href="https://github.com/domchristie/turndown/">turndown</a></b> and more remarkable libs. <br> </td> </tr> </table>

🌟 Sponsors

<table> <tr> <td><a href="http://www.umbst.com/" target="_blank"><img src="http://www.umbst.com/assets/images/logo.svg" height="38" width="38" title="圆伞科技"></a></td> </tr> </table>

🙏 Sponsors (sorted by date)

<div class="sponsors"> <span>☕Phithon</span> <span>☕c*i</span> <span>☕*Yuan</span> <span>☕*Xiuzhang</span> <span>☕*Junjie</span> <span>🌟圆伞科技</span> <span>☕*Di</span> </div>

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.