# Code Block Extension

## Example

```svelte
<script lang="ts">
	import { CoreRichTextEditor, Box, type SvelteTiptap } from '@foxui/all';
	import type { Readable } from 'svelte/store';

	let editor = $state<Readable<SvelteTiptap.Editor>>();
</script>

<Box>
	<CoreRichTextEditor
		bind:editor
		placeholder="Try typing ``` to create a code block..."
		class="min-h-46"
		content={{
			type: 'doc',
			content: [
				{
					type: 'paragraph',
					content: [
						{
							type: 'text',
							text: 'This is an example of a code block. You can create one by typing three backticks (```) followed by the language name.'
						}
					]
				},
				{
					type: 'codeBlock',
					attrs: { language: 'javascript' },
					content: [
						{
							type: 'text',
							text: 'function greet(name) {\n  return `Hello, ${name}!`;\n}'
						}
					]
				}
			]
		}}
	/>
</Box>
```

## Documentation

## Usage

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

```svelte
<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`.

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

## Sources

Based on "TipTap" (https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight)

## API Reference

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| lowlight | `Lowlight` | `-` | The lowlight instance for syntax highlighting. Create with `createLowlight(all)` from the lowlight package. (required) |
| defaultLanguage | `string` | `null` | Default language for new code blocks. |
| codeBlockComponent | `Component` | `-` | Custom Svelte component for rendering code blocks. Receives NodeViewProps from tiptap. |
| HTMLAttributes | `Record<string, string>` | `{}` | HTML attributes applied to code block elements. |