Runway

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.

Want different themes? Check out React Syntax Highlighter Demo and tweak the /components/atoms/CodeBlock component.

Usage

javascript
1import CodeBlock from "@/components/atoms/CodeBlock";
2
3<CodeBlock language="javascript">
4    {console.log("Hello, World!");}
5</CodeBlock>

You have to wrap the code inside curly braces to pass it as a child to the CodeBlock component.

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
wrapLongLines	boolean	`true`	Whether to wrap long lines of code
showLanguage	boolean	`false`	Whether to display the language name at the top of the code block
border	boolean	`false`	Whether to display a border around the code block

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!");
    }
}

Code Block with Everything

javascript

1function add(a, b) {
2    return a + b;
3}