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 Restrictions The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though. :::

Installation

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

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

Settings

Option	Type	Default	Description
HTMLAttributes	`Object`	`{}`	Custom HTML attributes that should be added to the rendered HTML tag.
languageClassPrefix	`String`	`'language-'`	Adds a prefix to language classes that are applied to code tags.

Commands

Command	Parameters	Description
codeBlock	—	Wrap content in a code block.

Keyboard shortcuts

Command	Windows/Linux	macOS
toggleCodeBlock	`Control` `Alt` `C`	`Cmd` `Alt` `C`

Source code

packages/extension-code-block/

2.2 KiB Raw Blame History Unescape Escape