tiptap/docs/api/marks/code.md
2021-09-16 14:41:25 +02:00

39 lines
1.5 KiB
Markdown

# Code
[![Version](https://img.shields.io/npm/v/@tiptap/extension-code.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code.svg)](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`&nbsp;`E`
* macOS: `Cmd`&nbsp;`E`
## Source code
[packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/)
## Usage
<tiptap-demo name="Marks/Code"></tiptap-demo>