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

Start Development

# Install packages
npm run dev_init

# Run demo page
npm run dev

# Run test
npm run test

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 ¹
  • 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 ³ , 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 ¹
• Hover to read footnotes
• Copy and Paste, translate HTML into Markdown ⁴
• Easy and ready-to-use Key-bindings (aka. KeyMap)

🎁 CodeMirror benefits

• 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

• 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
  • 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)	emoji-toolkit - Open emoji icons Demo Page and PowerPack/fold-emoji-with-emoji-toolkit use Emoji icons provided free by emoji-toolkit (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 , create your amazing themes and add-ons.
• Buy me a Coffee
• Spread HyperMD to the world!

---

Adding CUSTOM tokens for the editor

Steps to create a new token for the Editor(HyperMD-Fork)

1. /src/core/line-spans.ts In the const SpanType = '' // add the token name separated by '|'. eg: superscript In "getTokenTypes" function // add the token executor for start and end. This adds span for the tokens(start and end)

2. /src/addon/hide-token.ts // in the below constant add the token name in tokenTypes separated by '|': eg: superscript export const defaultOption: Options = { enabled: false, line: true, tokenTypes: "em|strong|strikethrough|code|linkText|task|customLink|highlightText".split("|"), }

3. /src/mode/hypermd.ts // in the below constant add the constant to define. The assignment is options as it is a default value export const enum LinkType { SUPERSCRIPT = true } or export const enum LinkType { SUPERSCRIPT }

   // in the below constant add the class name that has to be added for the element const linkStyle = { [LinkType.BARELINK]: "hmd-barelink", [LinkType.BARELINK2]: "hmd-barelink2", [LinkType.SUPERSCRIPT]: "hmd-superscript" }

   // in the below function, add your implementation under if(markdown) condition. verify the existing code for reference newMode.token = function (stream, state) { }

4. /mode/hypermd.scss // find the line matching below and add your class to it eg: cm-superscript; This is to hide the token span.hmd-hidden-token {

    &.cm-formatting-em,
    &.cm-formatting-strong,
    &.cm-formatting-strikethrough,
    &.cm-formatting-code,
    &.cm-formatting-link,
    &.cm-customlink,
    &.cm-highlightText {
        @extend %hidden-token;
    }
   

}

// similarly dark theme or any theme should be updated

4. /theme/hypermd-light.scss // add required style under .cm-s-hypermd-light { // here your styles }

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, see doc; #use two hash symbol# if tag name contains spaces. ↩

4. Use Ctrl+Shift+V to 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. ↩