hybrid-mde

A plain-text javascript markdown editor that renders text formatting live and in-place without the need for a preview pane. Built on CodeMirror 6.

Install

npm install --save hybrid-mde

Usage

Minimal Configuration

Create a basic editor without worrying about state.

import Hybrid from 'hybrid-mde'

Hybrid(document.getElementById('editor'))

State Tracking

Supply some initial data and set a callback to track data changes.

import Hybrid from 'hybrid-mde'

Hybrid(document.getElementById('editor'), {
  value: '# Start with some text',
  onChange: (value) => {
    console.log('Doc edited:', value)
  },
})

Hot-swap Docs

Swap the active doc without rebuilding the whole DOM or re-supplying configuration.

import Hybrid from 'hybrid-mde'

const editor = Hybrid(document.getElementById('editor'))

// user performs some action to change the active doc...
editor.setDoc('# New Doc')

Customization

Fonts

The fonts for hybrid-mde can be customized with CSS variables.

Images

When the renderImages: true config is used, some image properties can be changed with CSS variables.

Syntax Highlighting

The syntax highlighting theme is fully configurable through CSS variables. This means we can do things like...

• Change the heading colors
• Change all (or some) colors for individual light and dark modes
• Make adjustments for accessibility

Check out the examples below.

Examples

Light and Dark modes

Make headings dark for light mode and light for dark mode.

.light {
  --hybrid-mde-heading: #111;
}

.dark {
  --hybrid-mde-heading: #eee;
}

Tags / CSS Variable Reference

Tags are applied to the code by the CodeMirror language parsers. This means things could possibly be a bit off depending on the language being highlighted. If you think something is being incorrectly highlighted, feel free to open an issue. The CSS variables listed under a given Tag are in order of highest-to-lowest precedence. For more information about Tags, check out the CodeMirror Tag reference.