CodeBlock

The CodeBlock component can be used to display code easily within a website. Put in a multiline string with the correct spacing and specify and language to show the desired code.

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return(fib(n-1) + fib(n-2))

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return(fib(n-1) + fib(n-2))""",
    language="python",
    show_line_numbers=True,
)

API Reference

CodeBlock

A code block.

Prop	Type	Description
`theme`	Literal	The theme to use ("light" or "dark").
`language`	Literal	The language to use.
`code`	str	The code to display.
`show_line_numbers`	bool	If this is enabled line numbers will be shown next to the code block.
`starting_line_number`	int	The starting line number to use.
`wrap_long_lines`	bool	Whether to wrap long lines.
`custom_style`	Dict	A custom style for the code block.
`code_tag_props`	Dict	Props passed down to the code tag.

Event Triggers

See the full list of default event triggers

← Callout DataEditor →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

CodeBlock

API Reference

CodeBlock