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

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

安装

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

npx @tiptap/cli add code-block-node

手动集成

对于 Vite 或 Next.js 以外的框架，请从开源仓库手动添加节点组件。

导入样式

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

用法

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

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} />
}

特性

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

需求

开源特性