---
title: "CodeBlockLowlight 扩展"
description: "使用 CodeBlockLowlight 扩展为您的文档添加带有语法高亮的代码块。欲了解更多信息，请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block-lowlight"
---

# CodeBlockLowlight 扩展

使用 CodeBlockLowlight 扩展为您的文档添加带有语法高亮的代码块。欲了解更多信息，请查看我们的文档！

使用 CodeBlockLowlight 扩展，您可以向文档中添加围栏代码块。它将用 `<pre>` 和 `<code>` HTML 标签包装代码。

> **语法高亮依赖:**
>
> 此扩展依赖于 [lowlight](https://github.com/wooorm/lowlight) 库来对代码块的内容应用
> 语法高亮。

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

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

## 安装

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

## 设置

### lowlight

您应该向此扩展提供 `lowlight` 模块。将 `lowlight`
包与扩展解耦允许客户端应用程序控制其使用的
lowlight 版本及其需要加载的编程语言包。

```js
import { lowlight } from 'lowlight/lib/core'

CodeBlockLowlight.configure({
  lowlight,
})
```

### HTMLAttributes

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

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

### enableTabIndentation

Enable tab key for indentation in code blocks.

Default: `false`

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

### tabSize

The number of spaces to use for tab indentation.

Default: `4`

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

### languageClassPrefix

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

默认值: `'language-'`

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

### defaultLanguage

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

默认值: `null`

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

## 命令

### setCodeBlock()

将内容包装在代码块中。

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

### toggleCodeBlock()

切换代码块。

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

## 键盘快捷键

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

## 源代码

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