CodeBlock

CodeBlock is a component that displays code with syntax highlighting and optional line numbers, copy functionality, and line wrapping.


    SELECT *
    FROM table
    WHERE condition = true
    ORDER BY column ASC

1
2    SELECT *
3    FROM table
4    WHERE condition = true
5    ORDER BY column ASC
6


    SELECT *
    FROM table
    WHERE condition = true
    ORDER BY column ASC


    SELECT very_long_column_name, another_long_column_name, even_more_long_column_names
    FROM table_with_long_name
    WHERE condition = true AND another_condition = true AND yet_another_condition = true
    ORDER BY column ASC

Prop	Type	Default value
Prop language	Type string	Default value default
Prop children	Type string	Default value default
Prop theme	Type "light" \| "dark"	Default value light
Prop showLineNumbers	Type boolean	Default value false
Prop showWrapButton	Type boolean	Default value false
Prop wrapLines	Type boolean	Default value false
Prop onCopy	Type (value: string) => void \| Promise<void>	Default value null
Prop onCopyError	Type (error: string) => void \| Promise<void>	Default value null

Variants

Language Support

SELECT * FROM table

#!/bin/bash
echo "Hello World"

{"key": "value"}

const Component = () => <div>Hello</div>

Features

1SELECT * FROM table

SELECT * FROM table

SELECT * FROM table

Checkbox Confirmation Dialog