slate-markdown
v0.1.1
Published
Add live markdown preview to your Slate editor.
Downloads
38
Readme
Installation
npm install slate-markdown
Usage
import { Editor } from 'slate';
import MarkdownPlugin from 'slate-markdown';
const markdown = MarkdownPlugin();
<Editor
plugins={[markdown]}
/>
Options
sizes
(default: ['2.441em', '1.953em', '1.563em', '1.25em', '1em']
)
A list of sizes to use for the headings, the index + 1 is used for the level
const markdown = MarkdownPlugin({
// This is the default:
sizes: ['2.441em', '1.953em', '1.563em', '1.25em', '1em'],
// ^ h1 ^ h2 ^ h3 ^ h4 ^ h5
})
classnames
An object containing additional classnames to attach to the rendered components. Useful to adapt the styling.
const markdown = MarkdownPlugin({
classnames: {
// When a title is rendered it will now have a .custom-title className
title: 'custom-title',
}
})
Possible keys are for the object are:
'title' | 'bold' | 'italic' | 'punctuation' | 'code' | 'list' | 'hr' | 'url'
strict
(default: true
)
This plugin uses PrismJS for highlighting the markdown. By default the Prism markdown grammar extends the markup grammar, and thusly supports things like <tag>
s, <script>
s etc.
This option disables the inherited HTML grammar, only allowing actual markdown to pass through. Set this to false
if you want to highlight HTML within the markdown.
Roadmap
This plugin is fairly complete (± small bugs) and used in production by us at Spectrum. Nevertheless, there's some features we want to implement in the future:
- [ ] GitHub-style codeblocks with triple backticks
License
Licensed under the MIT License, Copyright ©️ 2017 Maximilian Stoiber. See LICENSE.md for more information.
Most of this code was taken directly from the Slate examples, thanks to @ianstormtaylor. Source for the example copied here.