2.1 KiB
2.1 KiB
CodeBlockLowlight
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in <pre> and <code> HTML tags.
Type ``` (three backticks and a space) or ∼∼∼ (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing ```css . That should add a language-css class to the <code>-tag.
Installation
# with npm
npm install @tiptap/extension-code-block-lowlight
# with Yarn
yarn add @tiptap/extension-code-block-lowlight
Settings
| Option | Type | Default | Description |
|---|---|---|---|
| HTMLAttributes | Object |
{} |
Custom HTML attributes that should be added to the rendered HTML tag. |
| languageClassPrefix | String |
'language-' |
Adds a prefix to language classes that are applied to code tags. |
Commands
setCodeBlock()
Wrap content in a code block.
editor.commands.setCodeBlock()
toggleCodeBlock()
Toggle the code block.
editor.commands.toggleCodeBlock()
Keyboard shortcuts
| Command | Windows/Linux | macOS |
|---|---|---|
| toggleCodeBlock | Control Alt C |
Cmd Alt C |
Source code
packages/extension-code-block-lowlight/