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

description, icon

description	icon
The least code the better, but sometimes you need multiple lines of it.	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

# 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