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.

Live Playground

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

Vanilla JS/TS

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

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

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 JS/TS

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

const editorEl = document.getElementById('editor')!;

// Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="code">${defaultIcons.code}</button>
</div>`;
editorEl.before(toolbar);

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

// Toggle code on click
toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleCode().run();
});

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

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>
Excludes	_ (all other marks)
Spanning	false

Note

Code is an exclusive mark (excludes: '_'). When code is applied to text, all other marks (bold, italic, link, etc.) are removed from that range. This matches the semantics of inline code, which represents literal text.

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.

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