CodeBlockLowlight 扩展

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

输入 ``` （三个反引号和一个空格）或 ∼∼∼ （三个波浪号和一个空格），则会立即为您添加一个代码块。您甚至可以指定语言，尝试输入 ```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

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

默认值: 'language-'

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

defaultLanguage

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

默认值: null

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

命令

setCodeBlock()

将内容包装在代码块中。

editor.commands.setCodeBlock()

toggleCodeBlock()

切换代码块。

editor.commands.toggleCodeBlock()

键盘快捷键

源代码

packages/extension-code-block-lowlight/