HyperMD

Breaks the Wallbetweenwritingandpreview,in a Markdown Editor.

Online Demo|Examples|Documentation

Trung văn giới thiệu

Quickstart

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

Also for RequireJS, Parcel, webpack, plain browser env.Read the Doc

Why use HyperMD?

HyperMD is a set ofCodeMirroradd-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 Markdownblocks and elements
  • Strong,Emphasis,Strikethrough,Code
  • Links,Images
  • Title / Quote / Code Block / List / Horizontal Rule
• Markdown Extension
  • Simple Table
  • Footnote¹
  • TODO List(the box is clickable)
  • YAML Front Matter
  • $\LaTeX$Formula, inline or block display mode²
  • Emoji::joy:=> 😂(also support custom emoji)
• And more
  • HTML in Markdown-- WYSIWIG MDX is possible
  • #hashtag support³,seedemo
  • Flowchart and Diagrams (mermaidorflowchart.js)

💪 BetterMarkdown-ing Experience

• Upload Imagesand files via clipboard, or drag'n'drop
• Alt+Clickto open link / jump to footnote¹
• Hoverto read footnotes
• Copy and Paste,translate HTML into Markdown⁴
• Easy and ready-to-useKey-bindings(aka. KeyMap)

🎁CodeMirrorbenefits

• Syntax Highlight for code blocks, supports 120+ languages⁵.Mode can be loaded on-demand.
• Configurable key-bindings
• Diff and Merge
• Themes⁶
• Almost all of CodeMirror addons!

🔨 Extensible and Customizable

• UsePowerPacksto integrate 3rd-party libs and services on-the-fly
  • MathJax,marked,KaTeXand more.
  • Read the list
• HyperMD functions are highlymodulized

🎹 TailoredKeyMap"HyperMD":

• Table
  • EnterCreate a table with| column | line |
  • EnterInsert new row, or finish a table (if last row is empty)
  • TaborShift-Tabto navigate between cells
• List
  • TaborShift-Tabto indent/unindent current list item
• Formattinga nearby word (or selected text)
  • Ctrl+Bbold
  • Ctrl+Iemphasis
  • Ctrl+Dstrikethrough

Special Thanks

💎Service and Resource

IcoMoon- The IconPack(Free Version) Demo Pageuses IcoMoon icons. Related files are stored indemo/svgicon.	CodeCogs- An Open Source Scientific Library FoldMathuses 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 PageandPowerPack/insert-file-with-smmsuse 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 PageandPowerPack/fold-emoji-with-emojioneuse Emoji icons provided free byEmojiOne (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)

☕Phithon☕c*i☕*Yuan☕*Xiuzhang ☕*Junjie🌟 viên tán khoa kỹ☕*Di

Contributing

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

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

---

Footnotes

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

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

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

4. UseCtrl+Shift+Vto paste plain text.↩

5. Languages as many as CodeMirror supports.↩

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