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
```