Code

The Code mark applies inline code formatting to text. It renders as <code> and excludes the formatting mark group, so visual formatting (bold, italic, underline, strike, sub/superscript, and everything carried by TextStyle: text color, background color, font family, font size) cannot overlap with it. Marks that stay out of that group are semantic rather than visual, and they survive inside inline code: a link stays a link, and so does a comment thread anchor. 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 strips Bold/Italic/color/etc. from <code> segments, so a literal snippet cannot pick up styling from the text around it
• A literal snippet that still has to carry meaning: because the exclusion is scoped to the formatting group, a link or a comment thread anchor keeps working on code text

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

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

Click to try it out

Headless

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:

Vanilla

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 });

Angular

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>';
}

editor.html

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

React

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>
  );
}

Vue

<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>

Headless

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>
Group	formatting
Excludes	formatting (the formatting mark group)
Spanning	false

Note

Code both carries the formatting group and excludes it. Every core visual formatting mark declares the same group: Bold, Italic, Underline, Strike, Subscript, Superscript and TextStyle (the mark behind text color, background color, font family and font size, and the one Highlight writes to). Applying code strips all of them from the range, and so does parsing HTML: <code><strong>x</strong></code> comes in as plain code. Because Code is in the group it excludes, it also stays self-exclusive. Up to 0.14.0 Code excluded '_' (every mark), which took links and comment anchors with it.

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

Excluding third-party marks

A mark of your own joins the exclusion by declaring the same group. Nothing else is needed: Code never names the marks it excludes.

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

const Kbd = Mark.create({
  name: 'kbd',
  // Visual formatting: inline code should strip it, like bold.
  group: 'formatting',
  parseHTML() {
    return [{ tag: 'kbd' }];
  },
  renderHTML() {
    return ['kbd', 0];
  },
});

Leave the group off for a mark that carries meaning rather than appearance (a link, an annotation, an anchor into external state) and it will survive inside code.

The exclusion is written as a group name rather than a list of mark names on purpose. ProseMirror resolves every entry in excludes against the compiled schema, to a mark of that name or to the marks carrying that group, and throws SyntaxError: Unknown mark type when an entry resolves to neither. A name list would therefore break any setup that loads Code without those marks, while a group always resolves because Code itself carries it.

This schema group is not the same thing as the isFormatting flag, which only decides whether Clear Formatting removes a mark. A mark can set one without the other.

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. The pattern is `text`: a single backtick pair with no backtick inside, so ``text`` does not fire it.

The rule keeps the marks the matched text already had, so firing it inside a link, or in the middle of commented text, no longer punches an unmarked hole into that mark. Exclusion still wins over preservation: a preserved mark that Code excludes is dropped, so `text` typed inside bold text ends up as code without the bold.

Toolbar items

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

See also

• Code Block - preformatted code with language attribute
• Code Block Lowlight - syntax highlighting for code blocks via Lowlight
• Bold - strong emphasis with Cmd+B and **markdown**
• Italic - inline emphasis with Cmd+I and *markdown*
• Link - the semantic mark that stays out of the formatting group and survives inside inline code