---
title: "Code Block Node"
description: "Integrate a node component displaying code content in your Tiptap Editor. More in our docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/code-block-node"
---

# Code Block Node

Integrate a node component displaying code content in your Tiptap Editor. More in our docs!

A styled code block node for displaying formatted code snippets in the editor.

> **Interactive demo:** [code block node](https://template.tiptap.dev/preview/tiptap-node/code-block-node)

## Installation

You can add the node component via Tiptap CLI

```bash
npx @tiptap/cli@latest add code-block-node
```

## Usage

The CodeBlockNode is primarily a styling component that enhances the appearance of code blocks in the editor. To use it, simply include it in your project and ensure you're using the CodeBlock extension from Tiptap.

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/code-block-node/code-block-node.scss'

export default function EditorWithCodeBlock() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `<h2>1. Inline <code>&lt;code&gt;</code></h2>
    <p>You can use <code>&lt;code&gt;</code> to style short snippets like <code>const x = 42;</code>.</p>

    <h2>2. Block <code>&lt;pre&gt;&lt;code&gt;</code></h2>
    <pre><code>// This is a JavaScript example
function greet(name) {
    return \`Hello, \${name}!\`;
}

console.log(greet("World"));</code></pre>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## Features

- Syntax highlighting styles for code blocks
- Dark mode support
- Proper spacing and margins
- Enhanced readability with monospace font

## Requirements

Open source feature(s)

- [`@tiptap/extension-code-block`](https://tiptap.dev/docs/editor/extensions/nodes/code-block.md)
- [`@tiptap/extension-code-block-lowlight`](https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight.md)