代码块扩展

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

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

代码块扩展没有样式，并且没有内置语法高亮。如果你在寻找具有语法高亮的代码块，请尝试 CodeBlockLowlight 扩展。

安装

npm install @tiptap/extension-code-block

import CodeBlock from '@tiptap/extension-code-block'

const editor = new Editor({
  extensions: [CodeBlock],
})

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

默认值：'language-'

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

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

默认值：true

CodeBlock.configure({
  exitOnTripleEnter: false,
})

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

默认值：null

CodeBlock.configure({
  defaultLanguage: 'plaintext',
})

定义在箭头向下且后面没有节点时是否退出该节点。

默认值：true

CodeBlock.configure({
  exitOnArrowDown: false,
})

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

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

将内容包裹在代码块中。

editor.commands.setCodeBlock()

切换代码块。

editor.commands.toggleCodeBlock()

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