---
title: "CodeBlock extension"
description: "Use the CodeBlock extension in Tiptap to add fenced code blocks to your documents. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/code-block"
---

# CodeBlock extension

Use the CodeBlock extension in Tiptap to add fenced code blocks to your documents. Learn more in our docs!

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.

> **No syntax highlighting:**
>
> The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. Try the
> [CodeBlockLowlight](https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight.md) extension if you’re looking for
> code blocks with syntax highlighting.

> **Interactive demo:** [CodeBlock](https://embed.tiptap.dev/preview/Nodes/CodeBlock)

## Install

```bash
npm install @tiptap/extension-code-block
```

## Usage

```js
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-'`

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

### exitOnTripleEnter

Define whether the node should be exited on triple enter.

Default: `true`

```js
CodeBlock.configure({
  exitOnTripleEnter: false,
})
```

### defaultLanguage

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

Default: `null`

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

### exitOnArrowDown

Define whether the node should be exited on arrow down if there is no node after it.

Default: `true`

```js
CodeBlock.configure({
  exitOnArrowDown: false,
})
```

### enableTabIndentation

Define whether pressing the Tab key should be used for indentation.

Default: `false`

```js
CodeBlock.configure({
  enableTabIndentation: true,
})
```

### tabSize

Set the number of spaces to use for indentation.

Default: `4`

```js
CodeBlock.configure({
  tabSize: 2,
})
```

### HTMLAttributes

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

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

### enableTabIndentation

Enable tab key for indentation in code blocks.

Default: `false`

```js
CodeBlock.configure({
  enableTabIndentation: true,
})
```

### tabSize

The number of spaces to use for tab indentation.

Default: `4`

```js
CodeBlock.configure({
  tabSize: 2,
})
```

## Commands

### setCodeBlock()

Wrap content in a code block.

```js
editor.commands.setCodeBlock()
```

### toggleCodeBlock()

Toggle the code block.

```js
editor.commands.toggleCodeBlock()
```

## Keyboard shortcuts

| Command         | Windows/Linux     | macOS         |
| --------------- | ----------------- | ------------- |
| toggleCodeBlock | Control + Alt + C | Cmd + Alt + C |

## Source code

[packages/extension-code-block/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/)