Code

Mark text as inline code.

The Code extension allows you to mark text as inline code. Text is rendered as a <code> HTML element. This is different from the CodeBlock extension, which creates block-level code sections.

Installation

npm

npm install @tiptap/extension-code

Usage

import { Editor } from '@tiptap/core'
import Code from '@tiptap/extension-code'

const editor = new Editor({
  extensions: [
    Code,
  ],
})

Keyboard Shortcuts

• Mod-e - Toggle inline code formatting

Markdown Support

The extension supports markdown syntax for inline code:

• Type `text` to create inline code

Configuration Options

HTMLAttributes · Record<string, any> · default: "{}"

HTML attributes to add to the code element.

Code.configure({
  HTMLAttributes: {
    class: 'my-code-class',
  },
})

Commands

setCode()

Set a code mark on the current selection.

editor.commands.setCode()

toggleCode()

Toggle the code mark on the current selection.

editor.commands.toggleCode()

unsetCode()

Remove the code mark from the current selection.

editor.commands.unsetCode()

Behavior Notes

• The code mark excludes all other marks (configured with excludes: '_')
• The code mark is exitable, meaning you can move the cursor out of it
• Other formatting marks cannot be applied inside inline code

Source Code

View the source code on GitHub:

• packages/extension-code