---
title: "在你的编辑器中添加代码块节点"
description: "集成一个显示代码内容的节点组件到你的 Tiptap 编辑器中。更多内容请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/node-components/code-block-node"
---

# 在你的编辑器中添加代码块节点

集成一个显示代码内容的节点组件到你的 Tiptap 编辑器中。更多内容请查看我们的文档！

一个样式化的代码块节点，用于在编辑器中显示格式化的代码片段。

> **Interactive demo:** [code block node](https://template.tiptap.dev/preview/tiptap-node/code-block-node)

## 安装

你可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加节点组件。

```bash
npx @tiptap/cli@latest add code-block-node
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，请从 [开源仓库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-node/code-block-node) 手动添加节点组件。

### 导入样式

该组件要求你导入我们添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 的样式。

## 用法

CodeBlockNode 主要是一个样式组件，用于增强编辑器中代码块的外观。要使用它，只需将其包含在你的项目中，并确保你正在使用 Tiptap 的 CodeBlock 扩展。

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/code-block-node/code-block-node.scss'

export default function EditorWithCodeBlock() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `<h2>1. 行内 <code>&lt;code&gt;</code></h2>
    <p>你可以使用 <code>&lt;code&gt;</code> 来样式化短片段，比如 <code>const x = 42;</code>。</p>

    <h2>2. 块级 <code>&lt;pre&gt;&lt;code&gt;</code></h2>
    <pre><code>// 这是一个 JavaScript 示例
function greet(name) {
    return \`Hello, \${name}!\`;
}

console.log(greet("World"));</code></pre>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## 特性

- 代码块的语法高亮样式
- 暗模式支持
- 适当的间距和边距
- 使用等宽字体增强可读性

## 需求

开源特性

- [`@tiptap/extension-code-block`](https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block.md)
- [`@tiptap/extension-code-block-lowlight`](https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block-lowlight.md)