or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tiptap--extension-code

Inline code mark extension for the Tiptap rich text editor framework

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-code@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-code@3.4.0

index.mddocs/

Tiptap Extension Code

The @tiptap/extension-code package provides an inline code mark extension for the Tiptap rich text editor framework. It enables users to mark text as inline code using backticks (`code`) with keyboard shortcuts (Mod-e), automatically parses inline code blocks from input and paste operations, and renders them as HTML <code> elements.

Package Information

  • Package Name: @tiptap/extension-code
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-code

Core Imports

import { Code } from "@tiptap/extension-code";

For default import:

import Code from "@tiptap/extension-code";

For importing specific components:

import { Code, CodeOptions, inputRegex, pasteRegex } from "@tiptap/extension-code";

CommonJS:

const { Code } = require("@tiptap/extension-code");

Basic Usage

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

// Initialize editor with Code extension
const editor = new Editor({
  extensions: [
    Code.configure({
      HTMLAttributes: {
        class: "my-custom-code",
      },
    }),
  ],
  content: "<p>Here is some <code>inline code</code> in the text.</p>",
});

// Programmatically toggle code mark
editor.commands.toggleCode();

// Set code mark on selected text
editor.commands.setCode();

// Remove code mark from selected text
editor.commands.unsetCode();

Architecture

The extension integrates with Tiptap's mark system and provides:

  • Mark Extension: Extends Tiptap's Mark class to create inline code marks
  • Input Rules: Automatic parsing of backtick syntax while typing
  • Paste Rules: Recognition of backtick syntax when pasting content
  • Commands: Programmatic control through editor commands
  • Keyboard Shortcuts: Built-in shortcuts for quick formatting

Capabilities

Code Extension Class

Main extension class that creates inline code marks in the Tiptap editor.

/**
 * This extension allows you to mark text as inline code.
 * @see https://tiptap.dev/api/marks/code
 */
declare const Code: Mark<CodeOptions>;

Extension Configuration

Configure the Code extension with custom options.

interface CodeOptions {
  /**
   * The HTML attributes applied to the code element.
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Usage Example:

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

const editor = new Editor({
  extensions: [
    Code.configure({
      HTMLAttributes: {
        class: "inline-code",
        spellcheck: "false",
      },
    }),
  ],
});

Commands Interface

The Code extension adds three commands to the editor's command interface.

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    code: {
      /**
       * Set a code mark
       */
      setCode: () => ReturnType;
      /**
       * Toggle inline code
       */
      toggleCode: () => ReturnType;
      /**
       * Unset a code mark
       */
      unsetCode: () => ReturnType;
    };
  }
}

Usage Examples:

// Toggle code formatting (most common usage)
editor.commands.toggleCode();

// Apply code formatting to selected text
editor.commands.setCode();

// Remove code formatting from selected text
editor.commands.unsetCode();

// Check if current selection has code formatting
const isActive = editor.isActive('code');

Keyboard Shortcuts

Built-in keyboard shortcuts for quick code formatting.

  • Mod-e: Toggle inline code formatting (Cmd+e on Mac, Ctrl+e on Windows/Linux)

Input Rules

Automatic parsing of backtick syntax while typing, powered by regular expressions.

/**
 * Regular expression to match inline code blocks enclosed in backticks.
 * Matches an opening backtick, followed by any text that doesn't include
 * a backtick (captured for marking), followed by a closing backtick.
 */
declare const inputRegex: RegExp;

Pattern: /(^|[^])([^]+)(?!)$/`

Usage: Type `text` and it will automatically be converted to inline code formatting.

Paste Rules

Recognition of backtick syntax when pasting content from external sources.

/**
 * Regular expression to match inline code while pasting content.
 */
declare const pasteRegex: RegExp;

Pattern: /(^|[^])([^]+)(?!)/g`

Usage: Paste text containing `code` syntax and it will be automatically formatted as inline code.

HTML Integration

The extension handles HTML parsing and rendering for <code> elements.

HTML Parsing: Recognizes existing <code> elements when loading content HTML Rendering: Outputs semantic <code> HTML elements with customizable attributes

<!-- Input HTML -->
<p>This is <code>inline code</code> text.</p>

<!-- Rendered with custom attributes -->
<p>This is <code class="my-custom-code">inline code</code> text.</p>

Mark Properties

The Code extension has specific mark properties that control its behavior:

  • excludes: '_' - Excludes other marks with underscore notation
  • code: true - Identifies this as a code mark for editor logic
  • exitable: true - Allows cursor to exit the mark boundaries

Types

interface CodeOptions {
  HTMLAttributes: Record<string, any>;
}

// Regular expression constants
declare const inputRegex: RegExp;
declare const pasteRegex: RegExp;

// Extension class
declare const Code: Mark<CodeOptions>;