Code Block
The Code Block 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 5def fib(n): if n <= 1: return n else: return(fib(n-1) + fib(n-2))
Themes
The theme prop must be set to a Theme value accessed from the rx.code_block.themes namespace; strings are not accepted. By default, the code block uses one_light in light mode and one_dark in dark mode.
print("Hello, world!")To pick a theme that responds to the global color mode, pass rx.color_mode_cond with the desired light and dark variants:
print("Hello, world!")API Reference
rx.code_block
A code block.
Props
| Prop | Type | Description |
|---|---|---|
theme | Theme | The theme to use, accessed via rx.code_block.themes (e.g. rx.code_block.themes.one_dark). |
language | "abap""abnf""actionscript""ada""agda""al""antlr4""apacheconf""apex""apl""applescript""aql""arduino""arff""asciidoc""asm6502""asmatmel""aspnet""autohotkey""autoit""avisynth""avro-idl""bash""basic""batch""bbcode""bicep""birb""bison""bnf""brainfuck""brightscript""bro""bsl""c""cfscript""chaiscript""cil""clike""clojure""cmake""cobol""coffeescript""concurnas""coq""core""cpp""crystal""csharp""cshtml""csp""css""css-extras""csv""cypher""d""dart""dataweave""dax""dhall""diff""django""dns-zone-file""docker""dot""ebnf""editorconfig""eiffel""ejs""elixir""elm""erb""erlang""etlua""excel-formula""factor""false""firestore-security-rules""flow""fortran""fsharp""ftl""gap""gcode""gdscript""gedcom""gherkin""git""glsl""gml""gn""go""go-module""graphql""groovy""haml""handlebars""haskell""haxe""hcl""hlsl""hoon""hpkp""hsts""http""ichigojam""icon""icu-message-format""idris""iecst""ignore""index""inform7""ini""io""j""java""javadoc""javadoclike""javascript""javastacktrace""jexl""jolie""jq""js-extras""js-templates""jsdoc""json""json5""jsonp""jsstacktrace""jsx""julia""keepalived""keyman""kotlin""kumir""kusto""latex""latte""less""lilypond""liquid""lisp""livescript""llvm""log""lolcode""lua""magma""makefile""markdown""markup""markup-templating""matlab""maxscript""mel""mermaid""mizar""mongodb""monkey""moonscript""n1ql""n4js""nand2tetris-hdl""naniscript""nasm""neon""nevod""nginx""nim""nix""nsis""objectivec""ocaml""opencl""openqasm""oz""parigp""parser""pascal""pascaligo""pcaxis""peoplecode""perl""php""php-extras""phpdoc""plsql""powerquery""powershell""processing""prolog""promql""properties""protobuf""psl""pug""puppet""pure""purebasic""purescript""python""q""qml""qore""qsharp""r""racket""reason""regex""rego""renpy""rest""rip""roboconf""robotframework""ruby""rust""sas""sass""scala""scheme""scss""shell-session""smali""smalltalk""smarty""sml""solidity""solution-file""soy""sparql""splunk-spl""sqf""sql""squirrel""stan""stylus""swift""systemd""t4-cs""t4-templating""t4-vb""tap""tcl""textile""toml""tremor""tsx""tt2""turtle""twig""typescript""typoscript""unrealscript""uorazor""uri""v""vala""vbnet""velocity""verilog""vhdl""vim""visual-basic""warpscript""wasm""web-idl""wiki""wolfram""wren""xeora""xml-doc""xojo""xquery""yaml""yang""zig" | 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. |
code_tag_props | Dict[str, str | dict[str, str]] | Props passed down to the code tag. |