Skip to main content
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 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:

Build docs developers (and LLMs) love

Get started for freeTalk to us