extension-inline-code

@docs.plus/extension-inline-code

Tiptap mark for inline code (`code`).

It takes the place of @tiptap/extension-code and StarterKit's code mark, with the same <code> tag and the same Mod-e key.

Why use it

• No stray space when you leave a code span. @tiptap/extension-code inserts a space when ArrowRight exits a code span. This mark inserts no character into the document.
• The character before the opening backtick stays plain. Typing x`x` marks the content alone. A rule that captures that character in its match can delete or wrongly mark it.
• No code span across a hard break or a mention. The input rule declines a match that spans a non-text inline node. @tiptap/extension-code has no such check, so its rule converts the match.
• Code spans keep their backticks in Markdown. The mark claims the codespan token, so a code span survives export and import once the host loads @tiptap/markdown. A mark without Markdown hooks exports the text with no backticks.

Install

npm install @docs.plus/extension-inline-code

Or use pnpm add @docs.plus/extension-inline-code, yarn add @docs.plus/extension-inline-code, or bun add @docs.plus/extension-inline-code.

Requires @tiptap/core ^3.31.3 and @tiptap/pm ^3.31.3 (Tiptap 3.x).

This package imports no React, Vue, or Next.js code. Use it from a plain page, Vite, React, Vue, Svelte, Next.js, Nuxt, or SvelteKit. Create the editor in the browser.

React Native has no DOM. Load the editor in a web view.

Installs with no runtime dependencies.

On Safari and iOS Safari before 16.4, which have no RegExp lookbehind, the rules fall back to the upstream pattern. There, a non-space character before the opening backtick is removed.

Upgrading from @tiptap/extension-code? See Migrating from @tiptap/extension-code.

Quickstart

Run this Quickstart in your browser first, with nothing to install. The app lives in examples/vanilla.

The host page needs one mount point: <div id="editor"></div>. The snippet also imports @tiptap/starter-kit. Add it with npm install @tiptap/starter-kit when your app has none yet.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { InlineCode } from '@docs.plus/extension-inline-code'

const editor = new Editor({
  extensions: [
    // StarterKit's `code` mark claims the same `<code>` tag and the same
    // `Mod-e` key. Turn it off, or the document carries two code marks.
    StarterKit.configure({ code: false }),
    InlineCode
  ]
})

The snippet passes no element, so attach the editor to the mount point, then load a sample line:

editor.mount(document.querySelector('#editor')!)
editor.commands.setContent('<p>Call <code>render()</code> first.</p>')

The package ships no CSS, so the span inherits no styling of its own. Add this rule to see the span. light-dark() follows your page's color-scheme, so the span stays readable in dark mode. Styling has more rules.

.ProseMirror :not(pre) > code {
  background: light-dark(#f3f4f6, #374151);
  border-radius: 4px;
  padding: 0.15em 0.3em;
  font-size: 0.9em;
}

You should see one paragraph, with render() on a grey background. Type text between single backticks, and the backticks go away. Select a word and press Mod-e (Cmd on macOS, Ctrl elsewhere) to toggle the mark. Pasted backtick text converts the same way.

Caveats

• Keep StarterKit.configure({ code: false }). Otherwise two marks render <code>, and Mod-e over an existing code span stays code.
• Stored JSON with a code mark does not load. Once code is off, that JSON throws a RangeError, and the editor keeps an empty paragraph. Rename the mark first — see Migrating from @tiptap/extension-code.
• excludes: '_' strips every other mark. Applying inline code drops bold, italic and links from the selection, so code text never stacks other marks. Apply inline code first, then the surrounding formatting outside the span.
• ArrowRight clears the stored mark only at the document end. At the end of a paragraph in the middle of a document the key does nothing, so the next character stays code. Press Mod-e, or run toggleInlineCode().

The full list, with the reason for each, is in Caveats.

Common tasks

Add a toolbar button

editor.chain().focus().toggleInlineCode().run()

Read the active state with editor.isActive('inlineCode'). Gate the button with editor.can().toggleInlineCode(). The three commands are listed in Commands.

Style the mark with a class

To target the mark by class instead, set one through HTMLAttributes and drop the :not(pre) selector:

InlineCode.configure({ HTMLAttributes: { class: 'inline-code' } })

.inline-code {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 0.15em 0.3em;
}

Export and import Markdown

A code span survives Markdown export and import, once the host loads @tiptap/markdown. The package does not load @tiptap/markdown itself. Add Markdown next to InlineCode, then read and write Markdown:

editor.commands.setContent('Call `render()` first.', { contentType: 'markdown' })
editor.getMarkdown() // 'Call `render()` first.'

The full setup is in Markdown.

Documentation

Guide	What it covers
API reference	Options, commands, keyboard shortcuts, the full caveats list, and TypeScript exports
Guide	Styling, input and paste rules, a custom delimiter, and Markdown
Migrating from @tiptap/extension-code	Moving from @tiptap/extension-code: five steps, a stored-JSON rename, and behavior differences
Changelog	Every release and its breaking changes
For AI coding agents	This README as plain Markdown for your agent. The docs are also on Context7

Part of docs.plus

This extension is built for and maintained by docs.plus. docs.plus is a free, real-time collaboration tool that lets communities organize knowledge hierarchically, with a chat thread on every heading. docs.plus runs these packages from source in production, so every release is exercised there before it reaches npm.

• Website: docs.plus
• Project README: docs-plus/docs.plus
• Sibling extensions and recommended pairings: extensions/README.md

Contributing

Bug reports and PRs welcome. Setup, test commands, and the playground harness live in CONTRIBUTING.md.

License

MIT — see LICENSE.