GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → laobubu → Hypermd

laobubu / Hypermd

Licence: mit
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

Programming Languages

typescript
32286 projects

Labels

markdowneditorwysiwygmarkdown-editorcodemirror

Projects that are alternatives of or similar to Hypermd

Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+833.31%)
Mutual labels:  markdown, editor, codemirror, markdown-editor
Tui.editor
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Stars: ✭ 14,016 (+1014.15%)
Mutual labels:  markdown, editor, wysiwyg
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (-14.86%)
Mutual labels:  markdown, editor, wysiwyg
Pine
A modern, native macOS markdown editor
Stars: ✭ 2,818 (+124.01%)
Mutual labels:  markdown, editor, markdown-editor
Thiefmd
The markdown editor worth stealing. Inspired by Ulysses, based on code from Quilter
Stars: ✭ 48 (-96.18%)
Mutual labels:  markdown, editor, markdown-editor
Rich Markdown Editor
The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
Stars: ✭ 2,468 (+96.18%)
Mutual labels:  markdown, editor, wysiwyg
Vditor
♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Stars: ✭ 3,773 (+199.92%)
Mutual labels:  markdown, editor, wysiwyg
Retext
ReText: Simple but powerful editor for Markdown and reStructuredText
Stars: ✭ 1,500 (+19.24%)
Mutual labels:  markdown, editor, markdown-editor
Phodit
Phodal's markdown/ebook editor with MicroFrontend & Web Components
Stars: ✭ 301 (-76.07%)
Mutual labels:  markdown, editor, markdown-editor
Awesome Web Editor
🔨 Open source WEB editor summary
Stars: ✭ 306 (-75.68%)
Mutual labels:  editor, wysiwyg, markdown-editor
For Editor
for-editor - A markdown editor based on React
Stars: ✭ 358 (-71.54%)
Mutual labels:  markdown, editor, markdown-editor
Mpeditor
微信markdown编辑器
Stars: ✭ 146 (-88.39%)
Mutual labels:  markdown, editor, markdown-editor
Django Markdown Editor
Awesome Django Markdown Editor, supported for Bootstrap & Semantic-UI
Stars: ✭ 423 (-66.38%)
Mutual labels:  markdown, wysiwyg, markdown-editor
Pervane
Plain text file based note taking and knowledge base building tool, markdown editor, simple browser IDE.
Stars: ✭ 159 (-87.36%)
Mutual labels:  markdown, editor, markdown-editor
Md
✍ 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 所有基础语法、色盘取色、一键复制并粘贴到公众号后台、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Stars: ✭ 2,242 (+78.22%)
Mutual labels:  markdown, editor, markdown-editor
Markdown Edit
online markdown editor/viewer
Stars: ✭ 188 (-85.06%)
Mutual labels:  markdown, codemirror, markdown-editor
Balsa
This repository holds source code of Balsa, a self hosted, privacy focused knowledgebase.
Stars: ✭ 93 (-92.61%)
Mutual labels:  markdown, editor, wysiwyg
Markor
Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..
Stars: ✭ 1,394 (+10.81%)
Mutual labels:  markdown, editor, markdown-editor
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-77.58%)
Mutual labels:  markdown, editor, wysiwyg
React Md Editor
A simple markdown editor with preview, implemented with React.js and TypeScript.
Stars: ✭ 374 (-70.27%)
Mutual labels:  markdown, editor, markdown-editor
View All Similar Projects ➔

HyperMD

HyperMD Markdown Editor

Breaks the Wall between writing and preview, in a Markdown Editor.

NPM version Build Status

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)

Remix on Glitch

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: 😂 => 😂 (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

🎹 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:

[^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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].