# hypermd > A full-featured Markdown editor, breaks the wall between writing and preview. Latest version **0.3.11** (published 2018-10-07) · MIT license · 0 weekly downloads ## Install ```sh npm install hypermd pnpm add hypermd yarn add hypermd bun add hypermd ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.11 | | Published | 2018-10-07 | | First published | 2018-05-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 547.1 KB | | Known vulnerabilities | 0 (+13 in 3 direct dependencies) | | Install scripts | no | | Author | laobubu | | Maintainers | laobubu | | Keywords | markdown, codemirror, wysiwyg | ## Links - npm: https://www.npmjs.com/package/hypermd - Homepage: https://laobubu.net/HyperMD/ - npm.io page: https://npm.io/package/hypermd ## Dependencies (9) - [katex](https://npm.io/package/katex.md) ^0.10.0-alpha - [marked](https://npm.io/package/marked.md) ^0.4.0 - [mathjax](https://npm.io/package/mathjax.md) ^2.7.0 - [mermaid](https://npm.io/package/mermaid.md) ^8.0.0-rc.8 - [twemoji](https://npm.io/package/twemoji.md) ^11.0.0 - [emojione](https://npm.io/package/emojione.md) ^3.1.6 - [turndown](https://npm.io/package/turndown.md) ^4.0.1 - [flowchart.js](https://npm.io/package/flowchart.js.md) ^1.11.2 - [turndown-plugin-gfm](https://npm.io/package/turndown-plugin-gfm.md) ^1.0.1 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 0.3.11 (latest) — 2018-10-07 - 0.3.10 — 2018-07-22 - 0.3.9 — 2018-07-04 - 0.3.8 — 2018-07-02 - 0.3.7 — 2018-07-02 - 0.3.6 — 2018-06-15 - 0.3.5 — 2018-06-14 - 0.3.4 — 2018-06-12 - 0.3.3 — 2018-06-09 - 0.3.2 — 2018-05-28 - 0.3.1 — 2018-05-23 - 0.3.0 — 2018-05-21 ## README # HyperMD ![HyperMD Markdown Editor](./demo/logo.png) **Breaks the Wall** between *writing* and *preview*, in a Markdown Editor. [![NPM version](https://img.shields.io/npm/v/hypermd.svg?style=flat-square)](https://npmjs.org/package/hypermd) [![Build Status](https://travis-ci.org/laobubu/HyperMD.svg?branch=master)](https://travis-ci.org/laobubu/HyperMD) [Online Demo](https://laobubu.net/HyperMD/) | [Examples][] | [Documentation][doc] [中文介绍](./docs/zh-CN/README.md) ## [Quickstart](./docs/quick-start.md) ```javascript // npm install --save hypermd codemirror var HyperMD = require('hypermd') var myTextarea = document.getElementById('input-area') var editor = HyperMD.fromTextArea(myTextarea) ``` [![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/hello-hypermd) Also for RequireJS, Parcel, webpack, plain browser env. [Read the Doc](./docs/quick-start.md) ## 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](https://laobubu.net), 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)](https://laobubu.net/HyperMD/docs/examples/custom-emoji.html) - **And more** + HTML in Markdown -- WYSIWIG MDX is possible + #hashtag support [^6] , see [demo](https://laobubu.net/HyperMD/docs/examples/hashtag.html) + Flowchart and Diagrams ([mermaid](https://laobubu.net/HyperMD/docs/examples/mermaid.html) or [flowchart.js](https://laobubu.net/HyperMD/docs/examples/flowchart.html)) ### 💪 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][powerpacks]* - 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**
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)_
☕Phithon ☕c*i ☕*Yuan ☕*Xiuzhang ☕*Junjie 🌟圆伞科技 ☕*Di
## Contributing HyperMD is a personal Open-Source project by [laobubu]. Contributions are welcomed. You may: - [Fork on GitHub](https://github.com/laobubu/HyperMD/) , create your amazing themes and add-ons. - [Buy me a Coffee](https://laobubu.net/donate.html) - Spread HyperMD to the world! ------------------------------------------------------- [CodeMirror]: https://codemirror.net/ [RequireJS]: http://requirejs.org/ [MathJax]: https://www.mathjax.org/ [marked]: https://github.com/chjj/marked/ [katex]: https://khan.github.io/KaTeX/ [laobubu]: https://laobubu.net/ [doc]: https://laobubu.net/HyperMD/docs/ [powerpacks]: https://laobubu.net/HyperMD/#./docs/powerpacks.md [examples]: https://laobubu.net/HyperMD/docs/examples/index.html [^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. --- _Source: https://npm.io/package/hypermd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._