Add a code block node to your Editor

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

Install

You can add the node component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add code-block-node

Manual Integration

For frameworks other than Vite or Next.js, add the node component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

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.

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)