---
title: "CodeBlockLowlight extension"
description: "Use the CodeBlockLowlight extension to add code blocks with syntax highlighting to your documents. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight"
---

# CodeBlockLowlight extension

Use the CodeBlockLowlight extension to add code blocks with syntax highlighting to your documents. Learn more in our docs!

With the CodeBlockLowlight extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.

> **Syntax highlight dependency:**
>
> This extension relies on the [lowlight](https://github.com/wooorm/lowlight) library to apply
> syntax highlight to the code block’s content.

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.

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

## Install

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

## Settings

### lowlight

You should provide the `lowlight` module to this extension. Decoupling the `lowlight`
package from the extension allows the client application to control which
version of lowlight it uses and which programming language packages it needs to load.

```js
import { lowlight } from 'lowlight/lib/core'

CodeBlockLowlight.configure({
  lowlight,
})
```

### HTMLAttributes

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

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

### enableTabIndentation

Enable tab key for indentation in code blocks.

Default: `false`

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

### tabSize

The number of spaces to use for tab indentation.

Default: `4`

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

### languageClassPrefix

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

Default: `'language-'`

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

### defaultLanguage

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

Default: `null`

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

## 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-lowlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/)