Code

The Code component displays a block of code in the specified language.

Basic usage

 
tsx
Copied
1
const code = dedent(`
2
  export default async function (params) {
3
    console.log("parameters:", params);
4
    return [
5
      { element: "hydrogen", weight: 1.008 },
6
      { element: "helium", weight: 4.0026 },
7
      ];
8
  }`);
9
return <Code language="typescript">{code}</Code>;

Supported languages
The Code component supports the following languages:
  • markup
  • bash
  • clike
  • c
  • cpp
  • css
  • css-extras
  • javascript
  • jsx
  • js-extras
  • js-templates
  • coffeescript
  • diff
  • git
  • go
  • graphql
  • markup-templating
  • handlebars
  • json
  • less
  • makefile
  • markdown
  • objectivec
  • ocaml
  • python
  • reason
  • sass
  • scss
  • sql
  • mysql
  • pgsql
  • stylus
  • tsx
  • typescript
  • wasm
  • yaml

Line numbers
Set withLineNumbers to display line numbers.
tsx
Copied
1
const code = dedent(`
2
  export default async function (params) {
3
    console.log("parameters:", params);
4
    return [
5
      { element: "hydrogen", weight: 1.008 },
6
      { element: "helium", weight: 4.0026 },
7
    ];
8
  }`);
9
return (
10
  <Code language="typescript" withLineNumbers>
11
    {code}
12
  </Code>
13
);

Component API
children
REQUIRED
string

The code content.

copy
optional
default: true
boolean

If true, a button will be rendered to copy code to clipboard.

copyLabel
optional
default: "Copy code"
string

Copy button label.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
language
REQUIRED
"none" | "go" | "c" | "markup" | "bash" | "clike" | "cpp" | "css" | "javascript" | "jsx" | "coffeescript" | "actionscript" | "css-extr" | "diff" | "git" | "graphql" | "handlebars" | "json" | "less" | "makefile" | "markdown" | "objectivec" | "ocaml" | "python" | "reason" | "sass" | "scss" | "sql" | "stylus" | "tsx" | "typescript" | "wasm" | "yaml" | "mysql" | "pgsql"

The code language.

radius
optional
number | "xs" | "sm" | "md" | "lg" | "xl"

Border radius of the code block.

theme
optional
default: light
"light" | "dark"

Theme of the code.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.
withLineNumbers
optional
default: false
boolean

Whether to render line numbers.

PrivacyTermsSupport