2.6 KiB
| description | icon |
|---|---|
| The least code the better, but sometimes you just need multiple lines. | terminal-box-line |
CodeBlock
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.
::: warning No syntax highlighting The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. Try the CodeBlockLowlight extension if you’re looking for code blocks with syntax highlighting. :::
Installation
npm install @tiptap/extension-code-block
Settings
languageClassPrefix
Adds a prefix to language classes that are applied to code tags.
Default: 'language-'
CodeBlock.configure({
languageClassPrefix: 'language-',
})
exitOnTripleEnter
Define whether the node should be exited on triple enter.
Default: true
CodeBlock.configure({
exitOnTripleEnter: false,
})
exitOnArrowDown
Define whether the node should be exited on arrow down if there is no node after it.
Default: true
CodeBlock.configure({
exitOnArrowDown: false,
})
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
CodeBlock.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
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/