CodeBlockLowlight extension

With the CodeBlockLowlight 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.

Install

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

Source code

packages/extension-code-block-lowlight/