← Plugins

Markdown input

Markdown input component and schema type.

Markdown input component and schema type.

sanity-plugin-markdown

Markdown input component and schema type for Sanity

npm version

Installing

In your Sanity studio folder, run:

sanity install markdown

Features

  • Auto-growing input area
  • Preview mode
  • Keyboard shortcuts for formatting

Basic usage

TL;DR: Just use type: 'markdown' on a field in your schema!

Long version: In your schema definitions (think schemas/blogPost.js):

export default {
  name: 'blogPost',
  title: 'Blog Post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
      options: {
        minRows: 20
      }
    }
  ]
}

Options

  • editorClassName - string The class name to use for the editor.
  • minRows - number Minimum number of rows to show for the text area input (default: 10)
  • autoGrow - boolean Whether or not to automatically grow the text area on input (default: true)
  • usePreview - boolean Whether or not to use the preview functionality (default: true)
  • previewOptions - object Object of props passed to react-markdown for rendering (default: {skipHtml: true})
  • renderPreview - function React component used to render Markdown preview (default: react-markdown)
    • Looking to render full-blown HTML? You may import sanity-plugin-markdown/html-preview for a renderer that parses HTML. Be careful, input is not filtered.

Default option values

See options table. Can be retrieved programatically from the defaultOptions property on the input:

import MarkdownInput from 'sanity-plugin-markdown'

console.log(defaultOptions)

Keyboard shortcuts

Based on GitHub + Google Docs keyboard shortcuts.

Mac:

KeyAction
<kbd></kbd> + <kbd></kbd> + <kbd>P</kbd>Toggle write/preview mode
<kbd></kbd> + <kbd>B</kbd>Toggle bold
<kbd></kbd> + <kbd>I</kbd>Toggle italic
<kbd></kbd> + <kbd>K</kbd>Toggle link
<kbd></kbd> + <kbd></kbd> + <kbd>7</kbd>Toggle ordered list
<kbd></kbd> + <kbd></kbd> + <kbd>8</kbd>Toggle unordered list
<kbd></kbd> + <kbd></kbd> + <kbd>7</kbd>Toggle ordered list
<kbd></kbd> + <kbd></kbd> + <kbd>1-5</kbd>Toggle heading

Window/Linux:

KeyAction
<kbd></kbd> + <kbd></kbd> + <kbd>P</kbd>Toggle write/preview mode
<kbd></kbd> + <kbd>B</kbd>Toggle bold
<kbd></kbd> + <kbd>I</kbd>Toggle italic
<kbd></kbd> + <kbd>K</kbd>Toggle link
<kbd></kbd> + <kbd></kbd> + <kbd>7</kbd>Toggle ordered list
<kbd></kbd> + <kbd></kbd> + <kbd>8</kbd>Toggle unordered list
<kbd></kbd> + <kbd></kbd> + <kbd>7</kbd>Toggle ordered list
<kbd></kbd> + <kbd>Alt</kbd> + <kbd>1-5</kbd>Toggle heading

License

MIT © Espen Hovlandsdal