代码块

代码块是一种显示格式化代码的简单方式。默认情况下，代码块会保持刻意的简洁，但 BlockNote 也支持更多高级功能：

• 语法高亮
• 自定义主题
• 多种语言
• Tab 缩进

type CodeBlockOptions = {
  indentLineWithTab?: boolean;
  defaultLanguage?: string;
  supportedLanguages?: Record<
    string,
    {
      name: string;
      aliases?: string[];
    }
  >;
};

你可以选择只启用某些功能，或者完全不启用。这样可以灵活地根据你的应用需求使用代码块。

块结构

supportedLanguages: 代码块支持的语法高亮语言。默认为空。

类型与属性

type CodeBlock = {
  id: string;
  type: "codeBlock";
  props: {
    language: string;
  };
  content: StyledText[];
  children: Block[];
};

选项

与大多数块不同，代码块的 content 是纯文本。

语法高亮

启用语法高亮最简单的方式是使用 @blocknote/code-block 包。它提供了一个开箱即用的高亮器，支持广泛的语言：

npm install @blocknote/code-block

将其 syntaxHighlighter 扩展添加到编辑器中，并将匹配的 codeBlockOptions（支持的语言列表）传递给代码块规范：

import { createCodeBlockSpec } from "@blocknote/core";
import { codeBlockOptions, syntaxHighlighter } from "@blocknote/code-block";

const editor = useCreateBlockNote({
  extensions: [syntaxHighlighter],
  schema: BlockNoteSchema.create().extend({
    blockSpecs: {
      codeBlock: createCodeBlockSpec(codeBlockOptions),
    },
  }),
});

就是这样——你可以在这个示例中查看实际效果。

自定义语法高亮

在底层，高亮功能分为两部分。你也可以自行连接这两部分，从而完全控制打包内容：

• SyntaxHighlightingExtension（来自 @blocknote/core）提供高亮器——一个由你选择语言、主题和引擎的 Shiki 实例：

  type SyntaxHighlightingOptions = {
    createHighlighter: () => Promise<HighlighterGeneric<any, any>>;
  };
  
  const syntaxHighlighter = SyntaxHighlightingExtension(options);

  createHighlighter: 创建用于语法高亮的 Shiki 高亮器。

• 每个块都会通过块规范 meta 中的 highlight 回调决定是否高亮其文本，以及如何进行高亮：

  // In the block spec's `meta`:
  highlight?: (block: Block) => string | undefined;

  它会针对块的每个实例运行，并返回用于高亮块文本的语言（高亮器支持的语言之一）；如果不进行高亮，则返回 undefined。默认代码块已经实现了这一功能，会返回其 language 属性，而 codeBlockOptions 则为内置高亮器提供匹配的支持语言集合。

要创建自己的高亮器，shiki-codegen CLI 可以为你选择的语言和主题生成代码。例如，下面的命令会创建一个使用经过优化的 JavaScript 引擎、支持 javascript、typescript 和 vue，并包含浅色和深色主题的高亮器：

npx shiki-codegen --langs javascript,typescript,vue --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts

这会生成一个 shiki.bundle.ts 文件，你可以使用它来创建扩展——就像上面的预配置扩展一样，将其添加到编辑器中，同时使用配置了相匹配语言的 createCodeBlockSpec：

import { SyntaxHighlightingExtension } from "@blocknote/core";
import { createHighlighter } from "./shiki.bundle.js";

const syntaxHighlighter = SyntaxHighlightingExtension({
  createHighlighter: () =>
    createHighlighter({
      themes: ["light-plus", "dark-plus"],
      langs: [],
    }),
});

下面的示例展示了完整的配置：

相关内容

想要查找以代码形式编写，但会被渲染为代码生成结果的块吗？请参阅数学块和图表块，或者自行构建。