withspectrum/slate-markdown

Name: slate-markdown

Owner: Spectrum

Description: Add live markdown preview support to your Slate editor.

Created: 2017-05-06 15:57:53.0

Updated: 2018-05-07 09:18:31.0

Pushed: 2017-06-06 16:23:07.0

Homepage: https://slate-markdown.spectrum.chat

Size: 153

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Installation

install slate-markdown

Usage

rt { Editor } from 'slate';
rt MarkdownPlugin from 'slate-markdown';

t markdown = MarkdownPlugin();

tor
ugins={[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

t markdown = MarkdownPlugin({
 This is the default:
zes: ['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.

t markdown = MarkdownPlugin({
assnames: {
// When a title is rendered it will now have a .custom-title className
title: 'custom-title',

Possible keys are for the object are:

le' | '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 are looking to implement in the future:

• [ ] GitHub-style codeblocks with triple backticks

If you want to help out with any of these, please feel free to submit PRs!

Development

Development of this plugin is done via the example/ app. Here's how to get the plugin building locally:

wnload the repo
clone https://github.com/withspectrum/slate-markdown
stall the dependencies of the package
late-markdown
install
art the build process with a watcher
run build -- --watch # (notice the extra --, you need those!)

To see your local version of the plugin locally open another terminal tab and run these commands:

t into the example folder (this is assuming you're already in the slate-markdown folder)
xample
stall the example dependencies
install
n the example locally, this should open a browser tab
start
 this doesn't open a browser tab open http://localhost:3000 manually

Now whenever you change the package the example app will reload automatically with the new code.

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.