Code

The Code mark applies inline code formatting to text. It renders as <code> and is an exclusive mark, meaning no other marks (bold, italic, etc.) can overlap with it. Included in StarterKit by default.

When to use

Use Code (mark) when you need:

Inline monospace formatting inside a paragraph (e.g. function name, flag value, file paths)
Cmd+E or backtick-wrap input rule for fast typing
Marks-inside-marks protection: Code prevents Bold/Italic/etc. from applying within <code> segments

Skip it if:

You need a multi-line code block (use the CodeBlock node instead)
You need syntax highlighting for inline snippets (out of scope; use a separate highlighter)

Live Playground

Select text and apply inline code with buttons, keyboard shortcut (Cmd+E / Ctrl+E), or type `text` to trigger the input rule.

Themed
Headless

With the default theme enabled. Click the code toolbar button or use Cmd+E / Ctrl+E.

Click to try it out

Plain editor without the theme. The buttons above call toggleCode(), setCode(), and unsetCode() directly.

Click to try it out

Usage

Code is included in StarterKit, so it works out of the box. To use it standalone:

import { Document, Paragraph, Text, Code } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

const dm = new DomternalEditor(editorEl, {
  extensions: [Document, Paragraph, Text, Code],
  content: '<p>Use <code>console.log()</code> to debug.</p>',
});

new DomternalToolbar(toolbarEl, { editor: dm.editor });

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Code } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Code];
  content = '<p>Use <code>console.log()</code> to debug.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Code } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Code]}
      content="<p>Use <code>console.log()</code> to debug.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Code } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Code];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Use <code>console.log()</code> to debug.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

import { Editor, Document, Paragraph, Text, Code } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Code],
  content: '<p>Use <code>console.log()</code> to debug.</p>',
});

// Toggle code programmatically
editor.chain().focus().toggleCode().run();

To disable Code in StarterKit:

StarterKit.configure({ code: false })

Schema

Property	Value
ProseMirror name	`code`
Type	Mark
HTML tag	`<code>`
Excludes	`_` (all other marks)
Spanning	`false`

The spanning: false property means the code mark does not span across multiple inline nodes. Each code segment is self-contained.

Parsing rules

Source	Condition
`<code>`	Always

Options

Option	Type	Default	Description
`HTMLAttributes`	`Record<string, unknown>`	`{}`	Custom HTML attributes added to the rendered `<code>` element

import { Code } from '@domternal/core';

const CustomCode = Code.configure({
  HTMLAttributes: { class: 'my-code' },
});

Commands

setCode

Applies inline code formatting to the current selection.

editor.commands.setCode();

unsetCode

Removes inline code formatting from the current selection.

editor.commands.unsetCode();

toggleCode

Toggles inline code formatting on the current selection. Applies code if not active, removes it if active.

editor.commands.toggleCode();

// With chaining
editor.chain().focus().toggleCode().run();

Keyboard shortcuts

Key	Action
`Mod-E`	Toggle inline code (`toggleCode`)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Input	Result
`text`	Wraps text in inline code

Type the closing backtick to trigger the conversion. The backticks are removed and the text between them becomes inline code.

Code registers a button in the toolbar with the name code in group format at priority 160.

Item	Type	Command	Icon	Shortcut	Active when
Code	`button`	`toggleCode`	`code`	`Mod-E`	Code mark is active on selection

Exports

import { Code } from '@domternal/core';
import type { CodeOptions } from '@domternal/core';

Export	Type	Description
`Code`	Mark extension	The inline code mark extension
`CodeOptions`	TypeScript type	Options for `Code.configure()`

Source

@domternal/core - Code.ts