mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-06-13 05:11:04 +08:00
39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
# Code
|
|
[](https://www.npmjs.com/package/@tiptap/extension-code)
|
|
[](https://npmcharts.com/compare/@tiptap/extension-code?minimal=true)
|
|
|
|
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
|
|
|
Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
|
|
|
|
## Installation
|
|
```bash
|
|
# with npm
|
|
npm install @tiptap/extension-code
|
|
|
|
# with Yarn
|
|
yarn add @tiptap/extension-code
|
|
```
|
|
|
|
## Settings
|
|
| Option | Type | Default | Description |
|
|
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
|
|
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
|
|
|
## Commands
|
|
| Command | Parameters | Description |
|
|
| ---------- | ---------- | ------------------------- |
|
|
| setCode | — | Mark text as inline code. |
|
|
| toggleCode | — | Toggle inline code mark. |
|
|
| unsetCode | — | Remove inline code mark. |
|
|
|
|
## Keyboard shortcuts
|
|
* Windows/Linux: `Control` `E`
|
|
* macOS: `Cmd` `E`
|
|
|
|
## Source code
|
|
[packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/)
|
|
|
|
## Usage
|
|
<tiptap-demo name="Marks/Code"></tiptap-demo>
|