Codeblock Extension

Format program snippets with multi-language syntax highlighting, a copy-to-clipboard trigger, and interactive diagram conversion.

Configuration

The editor wraps TipTap's standard CodeBlockLowlight extension, configuring it with the lightweight lowlight highlighter, and overlays it with a premium Svelte Node View component (CodeBlock.svelte).

Included Features

• Multi-Language Highlight: Automatically detects languages or lets users select the syntax format using a clean, search-enabled Popover dropdown.
• Mermaid Conversion: When the code block is set to mermaid, a one-click convert option appears to render your code into a visual flowchart or sequence diagram immediately.
• Copy Button: An inline clipboard button lets readers duplicate code blocks instantly.
• Editable Code Area: Full control to add, edit, or adjust syntax within standard HTML pre/code elements without breaking layout hierarchy.