tiptap 代码块

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

只需键入 ``` （三个反引号和一个空格）或 ~~~ （三个波浪线和一个空格），然后添加一个代码块。甚至可以指定语言，比如尝试输入```css 。这将在 <code> 标签上添加 language-css 类。

没有语法高亮
CodeBlock 扩展没有内置样式，也没有语法高亮功能。如果您需要带语法高亮的代码块，请尝试使用 CodeBlockLowlight 扩展。

安装

npm install @tiptap/extension-code-block

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

默认值：'language-'

CodeBlock.configure({
  languageClassPrefix: "language-",
});

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

默认值：true

CodeBlock.configure({
  exitOnTripleEnter: false,
});

定义是否在箭头向下时退出节点，如果其后无节点。

默认值：true

CodeBlock.configure({
  exitOnArrowDown: false,
});

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

CodeBlock.configure({
  HTMLAttributes: {
    class: "my-custom-class",
  },
});

将内容包裹在代码块中。

editor.commands.setCodeBlock();

切换代码块。

editor.commands.toggleCodeBlock();

命令	Windows/Linux	macOS
toggleCodeBlock	`Ctrl` `Alt` `C`	`Cmd` `Alt` `C`