tiptap 代码块
使用 CodeBlock 扩展,您可以在文档中添加围栏代码块。它会将代码包裹在 <pre>
和 <code>
HTML 标签中。
只需键入 ```
(三个反引号和一个空格)或 ~~~
(三个波浪线和一个空格),然后添加一个代码块。甚至可以指定语言,比如尝试输入```css
。这将在 <code>
标签上添加 language-css
类。
没有语法高亮
CodeBlock 扩展没有内置样式,也没有语法高亮功能。如果您需要带语法高亮的代码块,请尝试使用 CodeBlockLowlight 扩展。
安装
npm install @tiptap/extension-code-block
配置
languageClassPrefix
为应用到代码标签的语言类添加前缀。
默认值:'language-'
CodeBlock.configure({
languageClassPrefix: "language-",
});
exitOnTripleEnter
定义是否在三击回车时退出节点。
默认值:true
CodeBlock.configure({
exitOnTripleEnter: false,
});
exitOnArrowDown
定义是否在箭头向下时退出节点,如果其后无节点。
默认值:true
CodeBlock.configure({
exitOnArrowDown: false,
});
HTMLAttributes
自定义应添加到渲染 HTML 标签上的自定义 HTML 属性。
CodeBlock.configure({
HTMLAttributes: {
class: "my-custom-class",
},
});
命令
setCodeBlock()
将内容包裹在代码块中。
editor.commands.setCodeBlock();
toggleCodeBlock()
切换代码块。
editor.commands.toggleCodeBlock();
快捷键
命令 | Windows/Linux | macOS |
---|---|---|
toggleCodeBlock | Ctrl Alt C |
Cmd Alt C |
源码
packages/extension-code-block/