Reflex | CodeBlock

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

CodeBlock

The code 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.

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,
)

CodeBlock

A code block.

Props

Prop	Type	Description
`theme`	str	The theme to use ("light" or "dark").
`language`	str	The language to use.
`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.

Base Event Triggers

Code

Used to display inline code.

No props for Code.

Base Event Triggers

← Badge Divider →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

CodeBlock

CodeBlock

Props

Base Event Triggers

Code

No props for Code.

Base Event Triggers

[ Learn ]