Code Plugin

Inline code and fenced code blocks with syntax highlighting. Handles both single-backtick inline code and triple-backtick code blocks.

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 just the code plugin
import { SynclineMDXEditor, codePlugin } from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [codePlugin()],
});

Inline Code

Renders single-backtick `code` as inline monospace elements. Perfect for referencing function names, variables, file paths, or short snippets within paragraph text.

inline-code.md

Use `createEditor()` to initialise the editor.

Pass options as `{ container, value, plugins }`.

Inline code preserves `whitespace` and renders in a monospace font.

Keyboard shortcut: Ctrl/⌘ + E — wraps the current selection in backticks.

Fenced Code Blocks

Fenced code blocks with triple-backtick syntax. Specify the language after the opening fence for syntax highlighting.

code-blocks.md

```typescript
import { createEditor } from '@synclineapi/mdx-editor';

const editor = createEditor({
  container: '#editor',
  value: '# Hello World',
});
```

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"
```

```css
.editor-container {
  border: 1px solid var(--border);
  border-radius: 8px;
}
```

Keyboard shortcut: Ctrl/⌘ + Shift + C — inserts a code block.

Formatting Plugins

Lists Plugins

Docs Playground npm