🎀 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Markdown IDE

By Atila Fassina

Schema and Component for editing Markdown in Sanity

Warning

This plugin only works with an older version of Sanity Studio (v2), which is deprecated.

Learn how to migrate to the new Studio v3 β†’

Sanity-Plugin-MdIDE

This is a wrapper on React SimpleMDE Editor to be used on Sanity Studio

Installation πŸ“¦

sanity install sanity-plugin-mdide

Usage πŸš€

Just set type markdown to the field you wish to use.

// ./schemas/post.js

export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
    },
  ],
}

CSS customization 🎨

To fit well with Sanity Studioβ€˜s design system. These variables come from part:@sanity/base/theme/variables-style.

The list of CSS custom properties:

  • --body-text
  • --component-bg
  • --hairline-color
  • --border-radius-base
  • --brand-primary
  • --brand-secondary

This also allows to easily adapt to any color pallete.

Dark mode screenshot of Sanity-Plugin-MDIDE with dark colour palette
Light mode screenshot of Sanity-Plugin-MDIDE with dark colour palette

Configuration Options πŸ”§

Just is a very thin wrapper on top of React SimpleMDE Editor and as such, it accepts every option EasyMDE supports. On your field schema, just pass an options object.

export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'body',
      title: 'Body',
      type: 'markdown',
      options: {
        minHeight: '400px', // default is 500px
      },
    },
  ],
}

Thanks πŸ™‡β€β™‚οΈ

v2 install command (deprecated)

sanity install mdide

Contributor