0
# Tiptap Extension Code
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @tiptap/extension-code
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tiptap/extension-code`
10

11
## Core Imports
12

13
```typescript
14
import { Code } from "@tiptap/extension-code";
15
```
16

17
For default import:
18

19
```typescript
20
import Code from "@tiptap/extension-code";
21
```
22

23
For importing specific components:
24

25
```typescript
26
import { Code, CodeOptions, inputRegex, pasteRegex } from "@tiptap/extension-code";
27
```
28

29
CommonJS:
30

31
```javascript
32
const { Code } = require("@tiptap/extension-code");
33
```
34

35
## Basic Usage
36

37
```typescript
38
import { Editor } from "@tiptap/core";
39
import { Code } from "@tiptap/extension-code";
40

41
// Initialize editor with Code extension
42
const editor = new Editor({
43
  extensions: [
44
    Code.configure({
45
      HTMLAttributes: {
46
        class: "my-custom-code",
47
      },
48
    }),
49
  ],
50
  content: "<p>Here is some <code>inline code</code> in the text.</p>",
51
});
52

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

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

59
// Remove code mark from selected text
60
editor.commands.unsetCode();
61
```
62

63
## Architecture
64

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

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

73
## Capabilities
74

75
### Code Extension Class
76

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

79
```typescript { .api }
80
/**
81
 * This extension allows you to mark text as inline code.
82
 * @see https://tiptap.dev/api/marks/code
83
 */
84
declare const Code: Mark<CodeOptions>;
85
```
86

87
### Extension Configuration
88

89
Configure the Code extension with custom options.
90

91
```typescript { .api }
92
interface CodeOptions {
93
  /**
94
   * The HTML attributes applied to the code element.
95
   * @default {}
96
   * @example { class: 'foo' }
97
   */
98
  HTMLAttributes: Record<string, any>;
99
}
100
```
101

102
**Usage Example:**
103

104
```typescript
105
import { Editor } from "@tiptap/core";
106
import { Code } from "@tiptap/extension-code";
107

108
const editor = new Editor({
109
  extensions: [
110
    Code.configure({
111
      HTMLAttributes: {
112
        class: "inline-code",
113
        spellcheck: "false",
114
      },
115
    }),
116
  ],
117
});
118
```
119

120
### Commands Interface
121

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

124
```typescript { .api }
125
declare module '@tiptap/core' {
126
  interface Commands<ReturnType> {
127
    code: {
128
      /**
129
       * Set a code mark
130
       */
131
      setCode: () => ReturnType;
132
      /**
133
       * Toggle inline code
134
       */
135
      toggleCode: () => ReturnType;
136
      /**
137
       * Unset a code mark
138
       */
139
      unsetCode: () => ReturnType;
140
    };
141
  }
142
}
143
```
144

145
**Usage Examples:**
146

147
```typescript
148
// Toggle code formatting (most common usage)
149
editor.commands.toggleCode();
150

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

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

157
// Check if current selection has code formatting
158
const isActive = editor.isActive('code');
159
```
160

161
### Keyboard Shortcuts
162

163
Built-in keyboard shortcuts for quick code formatting.
164

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

167
### Input Rules
168

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

171
```typescript { .api }
172
/**
173
 * Regular expression to match inline code blocks enclosed in backticks.
174
 * Matches an opening backtick, followed by any text that doesn't include
175
 * a backtick (captured for marking), followed by a closing backtick.
176
 */
177
declare const inputRegex: RegExp;
178
```
179

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

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

184
### Paste Rules
185

186
Recognition of backtick syntax when pasting content from external sources.
187

188
```typescript { .api }
189
/**
190
 * Regular expression to match inline code while pasting content.
191
 */
192
declare const pasteRegex: RegExp;
193
```
194

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

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

199
### HTML Integration
200

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

203
**HTML Parsing**: Recognizes existing `<code>` elements when loading content
204
**HTML Rendering**: Outputs semantic `<code>` HTML elements with customizable attributes
205

206
```html
207
<!-- Input HTML -->
208
<p>This is <code>inline code</code> text.</p>
209

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

214
### Mark Properties
215

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

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

222
## Types
223

224
```typescript { .api }
225
interface CodeOptions {
226
  HTMLAttributes: Record<string, any>;
227
}
228

229
// Regular expression constants
230
declare const inputRegex: RegExp;
231
declare const pasteRegex: RegExp;
232

233
// Extension class
234
declare const Code: Mark<CodeOptions>;
235
```