CodeBlock

A code block component with syntax highlighting.

Note: This component is only supported as a React Server Component, meaning it can not be re-rendered on the client.

Props

code: The code to display.
language: The language of the code (such as javascript). If not given, no syntax highlighting will be applied.
lineNumbers: Whether to display line numbers. Defaults to false.
theme: The theme to use for syntax highlighting. One of auto (using Joy UI's theme setting), dark, light, inverted. Defaults to auto.
disableBorder: Whether to disable the border. Defaults to false.

A more technical prop, codeProps, is available for advanced customizations.

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

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

1<CodeBlock
2  theme="inverted"
3  language="python"
4  lineNumbers
5  code="..."
6/>

1<CodeBlock
2  theme="inverted"
3  language="python"
4  lineNumbers
5  code="..."
6/>