Add a code block node to your Editor
A styled code block node for displaying formatted code snippets in the editor.
Installation
You can add the node component via Tiptap CLI
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.
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><code></code></h2>
<p>You can use <code><code></code> to style short snippets like <code>const x = 42;</code>.</p>
<h2>2. Block <code><pre><code></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)