Basic Formatting
In its bare form, MDXEditor supports only the most basic formatting - bold, italic, underline and inline code
. It's enough to write a simple text, but not much more. There are several plugins that allow the users to create a document structure and apply semantic formatting.
Headings
The Headings plugin enables the usage of markdown headings which translate to H1
- H6
in HTML.
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { headingsPlugin } from '@mdxeditor/editor/plugins/headings'
//...
<MDXEditor markdown='# Hello world' plugins={[headingsPlugin()]} />
Quotes
The Quote plugin enables the usage of quotes which translate to blockquote
in HTML.
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { quotePlugin } from '@mdxeditor/editor/plugins/quote'
const markdown = "> This is a quote"
//...
<MDXEditor markdown={markdown} plugins={[quotePlugin()]} />
Lists
The Lists plugin enables the usage of ordered, unordered and check lists, including multiple levels of nesting.
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { listsPlugin } from '@mdxeditor/editor/plugins/lists'
const markdown = `
* Item 1
* Item 2
* Item 3
* nested item
1. Item 1
2. Item 2
`
//...
<MDXEditor markdown={markdown} plugins={[listsPlugin()]} />
Thematic Break
The Thematic Break plugin enables the usage of thematic breaks which translate to hr
in HTML.
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { thematicBreakPlugin } from '@mdxeditor/editor/plugins/thematic-break'
const markdown = `
Hello
---
World
`
//...
<MDXEditor markdown={markdown} plugins={[thematicBreakPlugin()]} />