# kf-slate-md-editor > Add live markdown preview and edit to your Slate editor. Latest version **0.0.1** (published 2018-05-22) · MIT license · 0 weekly downloads ## Install ```sh npm install kf-slate-md-editor pnpm add kf-slate-md-editor yarn add kf-slate-md-editor bun add kf-slate-md-editor ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.1 | | Published | 2018-05-22 | | First published | 2018-05-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 24 | | Unpacked size | 5.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | zhangliqing | | Keywords | slate, plugin, markdown | ## Links - npm: https://www.npmjs.com/package/kf-slate-md-editor - Repository: https://github.com/zhangliqing/slate-md-editor - Homepage: https://github.com/zhangliqing/slate-md-editor#readme - Issues: https://github.com/zhangliqing/slate-md-editor/issues - npm.io page: https://npm.io/package/kf-slate-md-editor ## Dependencies (24) - [prismjs](https://npm.io/package/prismjs.md) ^1.13.0 - [markup-it](https://npm.io/package/markup-it.md) ^7.0.0 - [slate-prism](https://npm.io/package/slate-prism.md) ^0.4.0 - [slate-edit-code](https://npm.io/package/slate-edit-code.md) ^0.15.0 - [slate-edit-list](https://npm.io/package/slate-edit-list.md) ^0.11.2 - [slate-soft-break](https://npm.io/package/slate-soft-break.md) ^0.6.0 - [styled-components](https://npm.io/package/styled-components.md) ^3.2.1 - [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^2.10.0 - [@canner/slate-icon-hr](https://npm.io/package/@canner/slate-icon-hr.md) ^1.2.6 - [slate-edit-blockquote](https://npm.io/package/slate-edit-blockquote.md) ^0.6.0 - [@canner/slate-icon-bold](https://npm.io/package/@canner/slate-icon-bold.md) ^1.2.6 - [@canner/slate-icon-code](https://npm.io/package/@canner/slate-icon-code.md) ^1.2.6 - [@canner/slate-icon-link](https://npm.io/package/@canner/slate-icon-link.md) ^1.2.6 - [@canner/slate-icon-list](https://npm.io/package/@canner/slate-icon-list.md) ^1.2.6 - [@canner/slate-icon-image](https://npm.io/package/@canner/slate-icon-image.md) ^1.2.6 - [@canner/slate-icon-header](https://npm.io/package/@canner/slate-icon-header.md) ^1.2.6 - [@canner/slate-icon-italic](https://npm.io/package/@canner/slate-icon-italic.md) ^1.2.6 - [@canner/slate-icon-shared](https://npm.io/package/@canner/slate-icon-shared.md) ^1.2.6 - [@canner/slate-icon-codeblock](https://npm.io/package/@canner/slate-icon-codeblock.md) ^1.2.6 - [@canner/slate-icon-underline](https://npm.io/package/@canner/slate-icon-underline.md) ^1.2.6 - [@canner/slate-icon-blockquote](https://npm.io/package/@canner/slate-icon-blockquote.md) ^1.2.6 - [@canner/slate-helper-block-list](https://npm.io/package/@canner/slate-helper-block-list.md) ^0.1.12 - [@canner/slate-icon-strikethrough](https://npm.io/package/@canner/slate-icon-strikethrough.md) ^1.2.6 - [@canner/slate-helper-mark-removeall](https://npm.io/package/@canner/slate-helper-mark-removeall.md) ^0.1.3 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 0.0.1 (latest) — 2018-05-22 ## README # slate-md-editor [![npm version](https://badge.fury.io/js/slate-md-editor.svg)](https://badge.fury.io/js/slate-md-editor) A markdown editor, that allows you to edit live. This project is built on top of [slate framework](http://slatejs.org/#/). Support markdown syntax and hot keys. ## Live ![demo](https://i.imgur.com/OqQMMiC.gif) ---- DEMO: [https://canner.github.io/slate-md-editor/](https://canner.github.io/slate-md-editor/) ## Usage There is two ways to use, you could use it as a complete markdown editor or use as a slate plugin in your editor. ## Complete markdown editor ``` npm install slate-md-editor ``` Render the complete markdown editor ```js import Editor from 'slate-md-editor'; const MdEditor = Editor(options); ``` ### Options Pass your customized settings here. `slate-md-editor` build on top of various slate plugins, `[xxxxOption]` will pass it's settings directly to corresponding plugins. ```js // default settings { markdownOption: { blocks: BLOCKS, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/blocks.js marks: MARKS, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/marks.js inlines: INLINES, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/inlines.js }, prismOption: { // https://github.com/GitbookIO/slate-prism onlyIn: node => node.type === 'code_block', getSyntax: node => node.data.get('syntax') }, codeOption: { // https://github.com/GitbookIO/slate-edit-code onlyIn: node => node.type === 'code_block' }, blockquoteOption: { // https://github.com/GitbookIO/slate-edit-blockquote }, listOption: { // https://github.com/GitbookIO/slate-edit-list types: ['ordered_list', 'unordered_list'], typeItem: 'list_item', typeDefault: 'paragraph' } } ``` ### Props - **value**: Slate `Value` - **onChange**: `(Change) => void` ## As slate plugin ```js import {MarkdownPlugin} from 'slate-md-editor'; const plugins = [ MarkdownPlugin(options) ] ``` ### Options `MarkdownPlugin` also use many other plugins as dependencies, and allows you to pass their customized settings. Additionally, ***blocks, marks, inlines*** default types are the same as [Markup-it](https://github.com/GitbookIO/markup-it). ```js // Default settings { blocks: BLOCKS, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/blocks.js marks: MARKS, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/marks.js inlines: INLINES, // https://github.com/GitbookIO/markup-it/blob/master/src/constants/inlines.js codeOption: { // https://github.com/GitbookIO/slate-edit-code onlyIn: node => node.type === BLOCKS.CODE }, blockquoteOption: { // https://github.com/GitbookIO/slate-edit-blockquote }, listOption: { // https://github.com/GitbookIO/slate-edit-list } } ``` If you want to change a type, you could set that specific key type alone, without all types. For example, you want to change `BOLD` default type to `bold_type`. Just pass object as below ```js { marks: {BOLD: 'bold_type'} } ``` This will replace default `BOLD` setting to your new setting. # Feature TOC - [Blockquote](#blockquote) - [Code block (inline)](#code-block-inline) - [Code block (triple backticks)](#code-block-triple-backticks) - [Header](#header) - [Bold](#bold) - [Italic](#italic) - [Bold + Italic](#bold--italic) - [Strikethrough](#strikethrough) - [Hr](#hr) - [Link](#link) - [Image](#image) - [Unordered List](#unordered-list) - [Ordered List](#ordered-list) ## Support ### Blockquote **In editor enter:** ``` >[space]Blockquote ``` ***Hot key*** Ctrl+opt+q ### Code block (inline) **In editor enter:** ``` [space * 4]Code block ``` ### Code block (triple backticks) **In editor enter:** ``` [` * 3][space] Code block ``` Use specific language: ``` [` * 3][lang][space] Code block ``` for example: ```js const wow = test() ``` ***Hot key*** CMD+Enter: to exit code block ### Header **In editor enter:** ``` [# * 1~6][space] Header ``` Example ``` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ``` ***Hot keys*** **Header 1** Ctrl+opt+1 **Header 2** Ctrl+opt+2 **Header 3** Ctrl+opt+3 **Header 4** Ctrl+opt+4 **Header 5** Ctrl+opt+5 **Header 6** Ctrl+opt+6 ### Bold **In editor enter:** ``` **strong**[space] or __strong__[space] ``` ***Hot key*** CMD+b ### Italic **In editor enter:** ``` _italic_[space] or *italic*[space] ``` ***Hot key*** CMD+i ### Bold + Italic **In editor enter:** ``` ___[strong + italic]___[space] or ***[strong + italic]***[space] ``` ### Strikethrough **In editor enter:** ``` ~[strikethrough]~[space] ``` ***Hot key*** Ctrl+Opt+d ### Hr **In editor enter:** ``` *** or --- ``` ### Link **In editor enter:** ``` [example](http://example.com "Optional title")[space] ``` ### Image **In editor enter:** ``` ![example](http://example.com "Optional title")[space] ``` ### Unordered list **In editor enter:** ``` *[space] or +[space] or -[space] ``` ### Ordered List **In editor enter:** ``` 1.[space] ``` ## Related projects 1. **Another rich text editor using Slate framework, with beautiful design: https://github.com/Canner/canner-slate-editor** 3. **20+ shared slate icons, selectors and helpers for Slate editors, in a monorepo: https://github.com/Canner/slate-editor-icons** 2. **Quick and customizable way to implement medium like toolbar in your slate editor: https://github.com/Canner/slate-toolbar** --- _Source: https://npm.io/package/kf-slate-md-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._