CodeBlockLowlight

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

语法高亮依赖
此扩展依赖于 lowlight 库，用于对代码块内容进行语法高亮。

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

安装

npm install lowlight @tiptap/extension-code-block-lowlight

请向该扩展提供 lowlight 模块。将 lowlight 包与扩展解耦，允许客户端应用程序控制使用哪个版本的 lowlight ，以及需要加载哪些编程语言包。

import { lowlight } from "lowlight/lib/core";

CodeBlockLowlight.configure({
  lowlight,
});

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

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

为应用于 <code> 标签的语言类添加前缀。

默认值：'language-'

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

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

默认值：null

CodeBlockLowlight.configure({
  defaultLanguage: "plaintext",
});

将内容包裹在代码块中。

editor.commands.setCodeBlock();

切换代码块。

editor.commands.toggleCodeBlock();

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