MDXEditor

https://mdxeditor.dev/docs

Admin

MDXEditor is an open-source React component that allows users to author markdown documents...

Tokens:472

Snippets:10

Trust Score:7.2

Update:4 months ago

Show doc for...

Tokens:

Raw

### JavaScript Code Block Example

Source: https://mdxeditor.dev

A simple JavaScript console log example within a markdown code block.

```javascript
console.log("A javascript code block")
```

--------------------------------

### Basic MDXEditor Usage

Source: https://mdxeditor.dev

This snippet shows how to integrate MDXEditor into a React application, allowing for markdown content editing.

```jsx
<MdxEditor
  markdown={markdown}
  className={className}
  contentEditableClassName="my-prose-class"
/>
```

--------------------------------

### MDXEditor Markdown Output Configuration

Source: https://mdxeditor.dev

Configures markdown output options for MDXEditor, such as using '+' for bullets and '_' for emphasis.

```jsx
<MdxEditor
  markdown={markdown}
  toMarkdownOptions={{
    bullet: '+', 
    emphasis: '_'
  }}
/>
```

--------------------------------

### MDXEditor with CodeMirror Plugin

Source: https://mdxeditor.dev

Enables CodeMirror for editable code blocks within MDXEditor, with support for specified languages like TSX and CSS.

```jsx
<MdxEditor
  markdown={markdown}
  plugins={[
    codeBlockPlugin(),
    codeMirrorPlugin({
      codeBlockLanguages: {
        tsx: 'TypeScript',
        css: 'CSS'
      }
    })
  ]}
/>
```

Tokens:

Raw