Rich Content Plugins

Advanced inline and block content: text highlighting, emoji picker, KaTeX math formulas, hover tooltips, and one-click copy buttons.

Usage

setup.ts

import { createEditor } from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

// All plugins included by default
const editor = createEditor({
  container: '#editor',
});

// Or import specific plugins
import {
  SynclineMDXEditor,
  highlightPlugin,
  emojiPlugin,
  formulaPlugin,
  tooltipPlugin,
  copyTextPlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [
    highlightPlugin(),
    emojiPlugin(),
    formulaPlugin(),
    tooltipPlugin(),
    copyTextPlugin(),
  ],
});

`highlightPlugin()`

Mark text with the <Highlight color="..."> JSX component. Supports 8 built-in colours: yellow, green, blue, purple, pink, red, orange, and cyan.

highlight.mdx

This is <Highlight color="yellow">highlighted text</Highlight> that stands out.

<Highlight color="green">Green highlight</Highlight> and <Highlight color="blue">blue highlight</Highlight> are also available.

Supported colors: yellow, green, blue, purple, pink, red, orange, cyan.

`emojiPlugin()`

Opens a searchable emoji picker from the toolbar. Click an emoji to insert it directly into the editor as a Unicode character. Includes 56+ common emoji with keyword search support.

`formulaPlugin()`

LaTeX math rendering via KaTeX. Use $...$ for inline math and $$...$$ for display-mode block equations. KaTeX must be loaded on the page for rendered output; otherwise a code fallback is shown.

Inline Math

inline-math.md

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Euler's identity: $e^{i\pi} + 1 = 0$.

Block Math

block-math.md

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

$$
\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}
$$

`tooltipPlugin()`

Add hover tooltips to any inline text using the <Tooltip tip="..."> JSX component. Useful for definitions, abbreviations, and contextual help.

tooltip.mdx

Hover over <Tooltip tip="Extra information appears here">this text</Tooltip> to see the tooltip.

The <Tooltip tip="POST /api/v1/documents">API endpoint</Tooltip> accepts JSON payloads.

`copyTextPlugin()`

One-click copy-to-clipboard block using the <CopyText> JSX component. Clicking the block copies its content to the clipboard with visual feedback.

copy-text.mdx

<CopyText>npm install @synclineapi/mdx-editor</CopyText>

<CopyText>sk-1234567890abcdef</CopyText>

Components Plugins

Callouts Plugin

Docs Playground npm