Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laobubu/hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
https://github.com/laobubu/hypermd
codemirror editor markdown markdown-editor typescript wysiwyg
Last synced: about 2 hours ago
JSON representation
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
- Host: GitHub
- URL: https://github.com/laobubu/hypermd
- Owner: laobubu
- License: mit
- Created: 2017-01-14T16:48:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-05T03:36:46.000Z (over 3 years ago)
- Last Synced: 2024-09-24T21:15:02.481Z (about 7 hours ago)
- Topics: codemirror, editor, markdown, markdown-editor, typescript, wysiwyg
- Language: TypeScript
- Homepage:
- Size: 1.08 MB
- Stars: 1,478
- Watchers: 32
- Forks: 137
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# HyperMD
**Breaks the Wall** between *writing* and *preview*, in a Markdown Editor.
[](https://npmjs.org/package/hypermd) [](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)
```
[](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.