> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# CodeBlock

> Create code blocks with syntax highlighting support and language detection.

The CodeBlock extension allows you to create code blocks for displaying code snippets. It supports language specification, syntax highlighting, and special keyboard handling for code editing.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-code-block
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-code-block
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-code-block
  ```
</CodeGroup>

## Usage

The CodeBlock extension is included in the StarterKit by default:

```typescript theme={null}
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

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

To use it standalone:

```typescript theme={null}
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import CodeBlock from '@tiptap/extension-code-block'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    CodeBlock,
  ],
})
```

## Configuration

### languageClassPrefix

Prefix for language classes applied to code tags.

<ParamField path="languageClassPrefix" type="string | null" default="'language-'">
  Adds a prefix to language classes that are applied to code tags.

  ```typescript theme={null}
  CodeBlock.configure({
    languageClassPrefix: 'language-',
  })
  ```
</ParamField>

### exitOnTripleEnter

Defines whether the node should be exited on triple enter.

<ParamField path="exitOnTripleEnter" type="boolean" default="true">
  Exit the code block when pressing Enter three times.

  ```typescript theme={null}
  CodeBlock.configure({
    exitOnTripleEnter: true,
  })
  ```
</ParamField>

### exitOnArrowDown

Defines whether the node should be exited on arrow down when at the end.

<ParamField path="exitOnArrowDown" type="boolean" default="true">
  Exit the code block when pressing arrow down at the end if there is no node after it.

  ```typescript theme={null}
  CodeBlock.configure({
    exitOnArrowDown: true,
  })
  ```
</ParamField>

### defaultLanguage

The default language for code blocks.

<ParamField path="defaultLanguage" type="string | null" default="null">
  Set a default language for all code blocks.

  ```typescript theme={null}
  CodeBlock.configure({
    defaultLanguage: 'javascript',
  })
  ```
</ParamField>

### enableTabIndentation

Enables tab key for indentation in code blocks.

<ParamField path="enableTabIndentation" type="boolean" default="false">
  When enabled, pressing Tab will insert spaces for indentation instead of changing focus.

  ```typescript theme={null}
  CodeBlock.configure({
    enableTabIndentation: true,
  })
  ```
</ParamField>

### tabSize

The number of spaces to use for tab indentation.

<ParamField path="tabSize" type="number" default="4">
  Number of spaces to insert when pressing Tab (only when enableTabIndentation is true).

  ```typescript theme={null}
  CodeBlock.configure({
    enableTabIndentation: true,
    tabSize: 2,
  })
  ```
</ParamField>

### HTMLAttributes

Custom HTML attributes to add to the rendered code block element.

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{}">
  Custom HTML attributes that should be added to the rendered HTML tag.

  ```typescript theme={null}
  CodeBlock.configure({
    HTMLAttributes: {
      class: 'my-code-block',
    },
  })
  ```
</ParamField>

## Commands

### setCodeBlock

Converts the current node to a code block.

```typescript theme={null}
editor.commands.setCodeBlock()

// With language specification
editor.commands.setCodeBlock({ language: 'javascript' })
```

### toggleCodeBlock

Toggles a code block. If the current node is already a code block, it converts it to a paragraph.

```typescript theme={null}
editor.commands.toggleCodeBlock()

// With language specification
editor.commands.toggleCodeBlock({ language: 'python' })
```

## Keyboard Shortcuts

* **Mod-Alt-C**: Toggle code block
* **Backspace**: Remove code block when empty or at start
* **Tab**: Insert indentation (when enableTabIndentation is true)
* **Shift-Tab**: Remove indentation (when enableTabIndentation is true)
* **Enter**: Exit code block on triple enter (when exitOnTripleEnter is true)
* **ArrowDown**: Exit code block when at end (when exitOnArrowDown is true)

## Input Rules

The CodeBlock extension supports Markdown-style input rules:

* Type ` ``` ` followed by a space to create a code block
* Type ` ``` ` followed by a language name and space to create a code block with that language
* Type `~~~` followed by a space as an alternative syntax

## Features

### VS Code Paste Support

The extension automatically detects code pasted from VS Code and creates a code block with the correct language.

### Tab Indentation

When `enableTabIndentation` is enabled, you can use Tab and Shift-Tab to indent and unindent code:

* **Tab** on a selection: Indents all selected lines
* **Shift-Tab** on a selection: Unindents all selected lines
* **Tab** without selection: Inserts indentation at cursor
* **Shift-Tab** without selection: Removes indentation at cursor

## Source Code

View the source code on GitHub:

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