CodeBlock extension

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.

Install

npm install @tiptap/extension-code-block

Usage

import CodeBlock from '@tiptap/extension-code-block'

const editor = new Editor({
  extensions: [CodeBlock],
})

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,
})

defaultLanguage

Define a default language instead of the automatic detection of lowlight.

Default: null

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

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',
  },
})

enableTabIndentation

Enable tab key for indentation in code blocks.

Default: false

CodeBlock.configure({
  enableTabIndentation: true,
})

tabSize

The number of spaces to use for tab indentation.

Default: 4

CodeBlock.configure({
  tabSize: 2,
})

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/