tiptap/docs/api/nodes/code-block.md

description
The least code the better, but sometimes you need multiple lines of it.

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

# with npm
npm install @tiptap/extension-code-block

# with Yarn
yarn add @tiptap/extension-code-block

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

CodeBlock.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

languageClassPrefix

Adds a prefix to language classes that are applied to code tags.

Default: 'language-'

CodeBlock.configure({
  languageClassPrefix: 'language-',
})

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/

Usage