CodeBlockLowlight
使用 CodeBlockLowlight 扩展,您可以在文档中添加带围栏的代码块。它会将代码包裹在 <pre>
和 <code>
HTML 标签中。
语法高亮依赖
此扩展依赖于 lowlight 库,用于对代码块内容进行语法高亮。
输入 ```
(三个反引号和一个空格)或 ~~~
(三个波浪线和一个空格),然后立即为您添加一个代码块。甚至可以指定语言,如 ```css
。这会在 <code>
标签上添加 language-css
类。
安装
npm install lowlight @tiptap/extension-code-block-lowlight
配置
lowlight
请向该扩展提供 lowlight
模块。将 lowlight
包与扩展解耦,允许客户端应用程序控制使用哪个版本的 lowlight
,以及需要加载哪些编程语言包。
import { lowlight } from "lowlight/lib/core";
CodeBlockLowlight.configure({
lowlight,
});
HTMLAttributes
自定义应添加到渲染 HTML 标签上的 HTML 属性。
CodeBlockLowlight.configure({
HTMLAttributes: {
class: "my-custom-class",
},
});
languageClassPrefix
为应用于 <code>
标签的语言类添加前缀。
默认值:'language-'
CodeBlockLowlight.configure({
languageClassPrefix: "language-",
});
defaultLanguage
定义一个默认语言,而不是自动检测lowlight
。
默认值:null
CodeBlockLowlight.configure({
defaultLanguage: "plaintext",
});
命令
setCodeBlock()
将内容包裹在代码块中。
editor.commands.setCodeBlock();
toggleCodeBlock()
切换代码块。
editor.commands.toggleCodeBlock();
快捷键
命令 | Windows/Linux | macOS |
---|---|---|
toggleCodeBlock | Ctrl Alt C |
Cmd Alt C |
源代码
packages/extension-code-block-lowlight/