---
title: "代码扩展"
description: "在您的 Tiptap 编辑器中使用代码扩展向文本中添加内联代码。更多信息请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/marks/code"
---

# 代码扩展

在您的 Tiptap 编辑器中使用代码扩展向文本中添加内联代码。更多信息请查看我们的文档！

Code 扩展使您可以在编辑器中使用 `<code>` HTML 标签。如果您粘贴包含 `<code>` 标签的文本，它将按相应方式呈现。

输入一些带有 \`反引号\` 的内容，它会在您输入时神奇地转换为 `内联代码`。

> **Interactive demo:** [Code](https://embed.tiptap.dev/preview/Marks/Code)

## 安装

```bash
npm install @tiptap/extension-code
```

## 设置

### HTMLAttributes

自定义 HTML 属性，应添加到渲染的 HTML 标签中。

```js
Code.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## 命令

### setCode()

将文本标记为内联代码。

```js
editor.commands.setCode()
```

### toggleCode()

切换内联代码标记。

```js
editor.commands.toggleCode()
```

### unsetCode()

移除内联代码标记。

```js
editor.commands.unsetCode()
```

## 键盘快捷键

| 命令           | Windows/Linux | macOS   |
| ------------ | ------------- | ------- |
| toggleCode() | Control + E   | Cmd + E |

## 源代码

[packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/)