39f5e4c31e
Declare lowlight as a peerDependency to delegate the control of which version of lowlight is used to the client application Co-authored-by: Enrique Alcantara <ealcantara@gitlab.com>
2.8 KiB
| description | icon |
|---|---|
| Add some colorful syntax highlighting to your code blocks. | terminal-box-fill |
CodeBlockLowlight
With the CodeBlockLowlight extension you can add fenced code blocks to your documents. It’ll wrap the code in <pre> and <code> HTML tags.
::: warning Syntax highlight dependency This extension relies on the lowlight library to apply syntax highlight to the code block’s content. :::
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
npm install lowlight @tiptap/extension-code-block-lowlight
Settings
lowlight
You should provide the lowlight module to this extension. Decoupling the lowlight
package from the extension allows the client application to control which
version of lowlight it uses and which programming language packages it needs to load.
import { lowlight } from 'lowlight/lib/core'
CodeBlockLowlight.configure({
lowlight,
})
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
CodeBlockLowlight.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
languageClassPrefix
Adds a prefix to language classes that are applied to code tags.
Default: 'language-'
CodeBlockLowlight.configure({
languageClassPrefix: 'language-',
})
defaultLanguage
Define a default language instead of the automatic detection of lowlight.
Default: null
CodeBlockLowlight.configure({
defaultLanguage: 'plaintext',
})
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/