Components CodeBlock

Code Block

A code block component for displaying code snippets

python

1def hello_world():
2    print("Hello, World!")

The CodeBlock component is a customizable code block that can be used to display code snippets. It supports syntax highlighting, line numbers, and copy-to-clipboard functionality.

Tip!

Use the copy, showLanguage, and showLineNumbers props to enable additional features for the code block.

Props

The CodeBlock component accepts the following props:

Prop	Type	Default	Description
children	ReactNode	-	The code to be displayed inside the code block
language	string	-	The language of the code snippet for syntax highlighting
showLineNumbers	boolean	false	Whether to display line numbers for the code snippet
startingLineNumber	number	1	The starting line number for the code snippet
copy	boolean	false	Whether to display a copy-to-clipboard button
wrapLines	boolean	false	Whether to wrap long lines of code
showLanguage	boolean	false	Whether to display the language name at the top of the code block

Info

The CodeBlock component uses the react-syntax-highlighter library to provide syntax highlighting for code snippets. You can customize the appearance and behavior of the code block by passing the appropriate props.

Usage Examples

Basic Code Block

print("Hello, World!")

Code Block with Line Numbers

5function add(a, b) {
6    return a + b;
7}

Code Block with Copy Button

interface User {
    name: string;
    age: number;
}

Code Block with Language Name

java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

ComponentsCodeBlock