Code Block Extension

Example

Usage

CoreRichTextEditor includes CodeBlockExtension by default — code blocks work out of the box with syntax highlighting and a copy button.

		<script lang="ts">
	import { CoreRichTextEditor } from '@foxui/text';
</script>

<CoreRichTextEditor placeholder="Type ``` to create a code block..." />

Copy button

CodeBlockView includes a copy-to-clipboard button that appears on hover. It shows a checkmark for 2 seconds after copying.

Custom code block component

Pass codeBlockComponent to replace the default rendering with your own Svelte component. Your component receives tiptap's NodeViewProps.

		<CoreRichTextEditor
	extraExtensions={[
		CodeBlockExtension.configure({
			lowlight: createLowlight(all),
			codeBlockComponent: MyCustomCodeBlock
		})
	]}
/>

API Reference

CodeBlockExtension

A tiptap Extension that wraps CodeBlockLowlight with a Svelte NodeView featuring a copy button. Add via extensions or extraExtensions.

Property Type Description

lowlight required

object

The lowlight instance for syntax highlighting. Create with `createLowlight(all)` from the lowlight package.

defaultLanguage

string

Default language for new code blocks. Default: null

codeBlockComponent

object

Custom Svelte component for rendering code blocks. Receives NodeViewProps from tiptap. Default: —

HTMLAttributes

object

HTML attributes applied to code block elements. Default: {}

Property

lowlight

defaultLanguage

codeBlockComponent

HTMLAttributes