---
title: "代码块扩展"
description: "在 Tiptap 中使用代码块扩展为你的文档添加围栏代码块。在我们的文档中了解更多信息！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block"
---

# 代码块扩展

在 Tiptap 中使用代码块扩展为你的文档添加围栏代码块。在我们的文档中了解更多信息！

使用代码块扩展可以为你的文档添加围栏代码块。它会将代码包裹在 `<pre>` 和 `<code>` HTML 标签中。

输入 \`\`\` （三个反引号和一个空格）或 ∼∼∼ （三个波浪号和一个空格），代码块会立即为你添加。你甚至可以指定语言，试着写 \`\`\`css 。这应该会为 `<code>` 标签添加一个 `language-css` 类。

> **无语法高亮:**
>
> 代码块扩展没有样式，并且没有内置语法高亮。如果你在寻找具有语法高亮的代码块，请尝试
> [CodeBlockLowlight](https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block-lowlight.md) 扩展。

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

## 安装

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

## 用法

```js
import CodeBlock from '@tiptap/extension-code-block'

const editor = new Editor({
  extensions: [CodeBlock],
})
```

## 设置

### languageClassPrefix

为应用于代码标签的语言类添加前缀。

默认值：`'language-'`

```js
CodeBlock.configure({
  languageClassPrefix: 'language-',
})
```

### exitOnTripleEnter

定义在三次回车时是否退出该节点。

默认值：`true`

```js
CodeBlock.configure({
  exitOnTripleEnter: false,
})
```

### defaultLanguage

定义一个默认语言，而不是自动检测语法高亮。

默认值：`null`

```js
CodeBlock.configure({
  defaultLanguage: 'plaintext',
})
```

### exitOnArrowDown

定义在箭头向下且后面没有节点时是否退出该节点。

默认值：`true`

```js
CodeBlock.configure({
  exitOnArrowDown: false,
})
```

### enableTabIndentation

Define whether pressing the Tab key should be used for indentation.

Default: `false`

```js
CodeBlock.configure({
  enableTabIndentation: true,
})
```

### tabSize

Set the number of spaces to use for indentation.

Default: `4`

```js
CodeBlock.configure({
  tabSize: 2,
})
```

### HTMLAttributes

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

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

### enableTabIndentation

启用在代码块中使用 Tab 键进行缩进。

默认值：`false`

```js
CodeBlock.configure({
  enableTabIndentation: true,
})
```

### tabSize

设置 Tab 缩进的空格数。

默认值：`4`

```js
CodeBlock.configure({
  tabSize: 2,
})
```

## 命令

### setCodeBlock()

将内容包裹在代码块中。

```js
editor.commands.setCodeBlock()
```

### toggleCodeBlock()

切换代码块。

```js
editor.commands.toggleCodeBlock()
```

## 键盘快捷键

| 命令              | Windows/Linux     | macOS         |
| --------------- | ----------------- | ------------- |
| toggleCodeBlock | Control + Alt + C | Cmd + Alt + C |

## 源代码

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