Code snippet

Syntax-highlighted code block with multiple languages and themes

The Code Snippet component provides a powerful code editor powered by CodeMirror with syntax highlighting, theme support, and interactive editing capabilities.

Node specification

The code snippet is a block-level node that contains text content with code formatting.

language · string · default: "'javascript'"

The programming language for syntax highlighting. Supported: javascript, typescript, html, css, python, rust, sql

title · string · default: "''"

Optional title for the code block (currently unused in UI)

theme · string · default: "'tokyoNight'"

The color theme. Available: tokyoNight, githubDark, githubLight, vscodeDark, vscodeLight

showBorder · boolean · default: "true"

Whether to display a border around the code block. Automatically set to false when inside tabs.

Usage

Insert via command menu

Type /code or /snippet in the editor and select the Code Snippet option from the command menu.

Insert via input rule

Type three backticks to trigger code block creation:

### Programmatic insertion

Use the `insertCodeSnippet` function to insert a code snippet programmatically:

```typescript
import { insertCodeSnippet } from "@/editor/components/code-snippet";

const transaction = insertCodeSnippet(editorState);
view.dispatch(transaction);

Attributes

The code snippet node spec defines the following attributes:

attrs: {
  language: { default: "javascript" },
  title: { default: "" },
  theme: { default: "tokyoNight" },
  showBorder: { default: true },
}

Supported languages

The code snippet uses CodeMirror language extensions:

const languageExtensions: Record<string, ReturnType<typeof javascript>> = {
  javascript: javascript({ jsx: true }),
  typescript: javascript({ typescript: true, jsx: true }),
  html: html(),
  css: css(),
  python: python(),
  rust: rust(),
  sql: sql(),
};

JavaScript and TypeScript support includes JSX/TSX syntax highlighting.

Themes

Five color themes are available:

tokyoNight · theme

Dark theme inspired by Tokyo Night color scheme

githubDark · theme

Dark theme matching GitHub’s dark mode

githubLight · theme

Light theme matching GitHub’s light mode

vscodeDark · theme

Dark theme matching VS Code’s default dark theme

vscodeLight · theme

Light theme matching VS Code’s default light theme

Editing features

The code snippet provides rich editing capabilities:

Hover controls

When hovering over a code block, controls appear in the top-right corner:

1. Language selector: Dropdown to change syntax highlighting language
2. Theme selector: Dropdown to change color theme
3. Border toggle: Button to show/hide the border
4. Copy button: Copies code to clipboard with visual feedback

Keyboard navigation

Special keyboard shortcuts for navigation between the code block and the surrounding document:

ArrowUp · keyboard

When cursor is at the start of the first line, exit to ProseMirror before the code block

ArrowDown · keyboard

When cursor is at the end of the last line, exit to ProseMirror after the code block

Ctrl+Enter · keyboard

Exit to ProseMirror after the code block and create a new paragraph if needed

Backspace · keyboard

When the code block is empty, delete the entire node and return to ProseMirror

Auto-focus behavior

When a new code snippet is created, the editor automatically focuses and positions the cursor at the end of the content.

Custom styling

The code snippet applies custom styling to CodeMirror:

const customStyling = EditorView.theme({
  "&": {
    borderRadius: "0.5rem",
    overflow: "hidden",
    backgroundColor: "transparent !important",
  },
  ".cm-scroller": {
    padding: "0.5rem",
    backgroundColor: "transparent !important",
  },
  ".cm-focused": {
    outline: "none",
  },
});

Event handling

The code snippet uses useStopEvent to prevent ProseMirror from capturing input events:

useStopEvent((view, event) => {
  if (event instanceof InputEvent) return true;
  return false;
});

The code snippet debounces content updates by 100ms to avoid excessive ProseMirror transactions while typing.

Integration with tabs

When inserted inside a tabs component, the code snippet automatically disables its border:

// Check if we're inside a tabs component
const $pos = state.selection.$from;
let insideTabs = false;
for (let i = $pos.depth; i >= 0; i--) {
  if ($pos.node(i).type.name === "tabs") {
    insideTabs = true;
    break;
  }
}

const codeNode = codeNodeType.create({
  language: "javascript",
  showBorder: !insideTabs,
});

DOM structure

The code snippet renders as:

<pre language="javascript" title="" theme="tokyoNight" show-border="true">
  <code><!-- text content --></code>
</pre>

Examples

JavaScript code

const greeting = "Hello, World!";
console.log(greeting);

TypeScript with types

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "John Doe"
};

Python example

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

Use code snippets for technical documentation, tutorials, and API examples. The syntax highlighting improves readability and the copy button makes it easy for users to use your code.