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.
CSS Variable | Description | Default Value |
---|---|---|
--hybrid-mde-font-family |
Proportional font used for normal text | sans-serif |
--hybrid-mde-font-family-mono |
Monospace font used for code | monospace |
Images
When the renderImages: true
config is used, some image properties can be changed with CSS variables.
CSS Variable | Description | Default Value |
---|---|---|
--hybrid-mde-image-backdrop-color |
Color of the image backdrop | rgba(0, 0, 0, 0.3) |
--hybrid-mde-image-max-height |
Max height of the image | 20rem |
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.
Tag | Override Variables | Default |
---|---|---|
atom | --hybrid-mde-atom | #d19a66 |
meta | --hybrid-mde-meta | #abb2bf |
processingInstruction | --hybrid-mde-processingInstruction | #abb2bf |
comment | --hybrid-mde-comment | #abb2bf |
name | --hybrid-mde-name | #d19a66 |
labelName | --hybrid-mde-labelName --hybrid-mde-name |
#abb2bf |
propertyName | --hybrid-mde-propertyName --hybrid-mde-name |
#96c0d8 |
propertyName (definition) | --hybrid-mde-propertyName-definition --hybrid-mde-propertyName --hybrid-mde-name |
#e06c75 |
variableName | --hybrid-mde-variableName --hybrid-mde-name |
#e06c75 |
variableName (definition) | --hybrid-mde-variableName-definition --hybrid-mde-variableName --hybrid-mde-name |
#e5c07b |
variableName (local) | --hybrid-mde-variableName-local --hybrid-mde-variableName --hybrid-mde-name |
#d19a66 |
variableName (special) | --hybrid-mde-variableName-special --hybrid-mde-variableName --hybrid-mde-name |
inherit |
heading | --hybrid-mde-heading | #e06c75 |
heading1 | --hybrid-mde-heading1 --hybrid-mde-heading |
#e06c75 |
heading2 | --hybrid-mde-heading2 --hybrid-mde-heading |
#e06c75 |
heading3 | --hybrid-mde-heading3 --hybrid-mde-heading |
#e06c75 |
heading4 | --hybrid-mde-heading4 --hybrid-mde-heading |
#e06c75 |
heading5 | --hybrid-mde-heading5 --hybrid-mde-heading |
#e06c75 |
heading6 | --hybrid-mde-heading6 --hybrid-mde-heading |
#e06c75 |
keyword | --hybrid-mde-keyword | #c678dd |
number | --hybrid-mde-number | #d19a66 |
operator | --hybrid-mde-operator | #96c0d8 |
punctuation | --hybrid-mde-punctuation | #36454f |
link | --hybrid-mde-link | #96c0d8 |
url | --hybrid-mde-url | #96c0d8 |
string | --hybrid-mde-string | #98c379 |
string (special) | --hybrid-mde-string-special --hybrid-mde-string |
inherit |
emphasis | --hybrid-mde-emphasis | inherit |
strong | --hybrid-mde-strong | inherit |