Skip to main content
The Code extension adds support for inline code formatting with keyboard shortcuts, input rules, and commands.

​
Installation

npm install @prosekit/extensions

​
Usage

Add the code extension to your editor: 
import { defineCode } from '@prosekit/extensions/code'
import { createEditor } from '@prosekit/core'

const editor = createEditor({
  extensions: [
    // ... other extensions
    defineCode(),
  ],
})

​
API Reference

​
defineCode()

Defines the complete inline code extension including:
  • Mark specification for <code> HTML tag
  • Commands for toggling code formatting
  • Keyboard shortcuts
  • Input rules for Markdown-style syntax
Returns: CodeExtension

​
Commands

​
toggleCode

Toggles inline code formatting on the current selection or at the cursor position. 
editor.commands.toggleCode()

​
Keyboard Shortcuts

ShortcutAction
Mod-eToggle inline code formatting
Mod is Cmd on macOS and Ctrl on Windows/Linux.

​
Input Rules

The extension supports Markdown-style input rules:
  • Type `text` to create inline code
  • The backticks will be automatically removed and the text will be formatted as code

​
HTML Output

Inline code is rendered as <code> elements: 
<code>inline code</code>

​
Parsing

The extension recognizes <code> tags when parsing content.

​
Code Mark Behavior

The code mark is defined with code: true, which means:
  • It excludes other marks by default
  • It’s treated as a code-like mark in the schema
  • Other formatting marks typically won’t apply inside code

​
Advanced Configuration

If you need more control, you can use the individual components: 
import { 
  defineCodeSpec,
  defineCodeCommands,
  defineCodeKeymap,
  defineCodeInputRule 
} from '@prosekit/extensions/code'

const editor = createEditor({
  extensions: [
    defineCodeSpec(),      // Just the mark definition
    defineCodeCommands(),  // Just the commands
    defineCodeKeymap(),    // Just the keyboard shortcuts
    defineCodeInputRule(), // Just the input rules
  ],
})

​
Difference from Code Block

This extension is for inline code (like variable in a sentence). For multi-line code blocks, see the Code Block extension.
  • Bold - Bold text formatting
  • Italic - Italic text formatting
  • Strike - Strikethrough text formatting