Component | Code

Render a formatted code block.

Node.js

ui.code(`
function add(a, b) {
  return a + b;
}

const result = add(1, 2);
`)

Python

ui.code("""
def add(a, b):
    return a + b

result = add(1, 2)
""")

Syntax Highlighting

Compose will try it's best to infer the language automatically. You can also specify the language manually using the lang property.

Node.js

type LanguageName =
  | "ada" | "clojure" | "coffeescript" | "dart" | "django"
  | "dockerfile" | "dust" | "elixir" | "elm" | "erlang"
  | "graphql" | "haskell" | "java" | "javascript" | "julia"
  | "kotlin" | "python" | "typescript" | "json" | "html"
  | "css" | "scss" | "jsx" | "bash" | "c" | "c++" | "csharp"
  | "go" | "markdown" | "php" | "ruby" | "rust" | "sql"
  | "swift" | "xml" | "yaml" | "zig" | "r"

Python

LanguageName = Literal[
  "ada" | "clojure" | "coffeescript" | "dart" | "django"
  | "dockerfile" | "dust" | "elixir" | "elm" | "erlang"
  | "graphql" | "haskell" | "java" | "javascript" | "julia"
  | "kotlin" | "python" | "typescript" | "json" | "html"
  | "css" | "scss" | "jsx" | "bash" | "c" | "c++" | "csharp"
  | "go" | "markdown" | "php" | "ruby" | "rust" | "sql"
  | "swift" | "xml" | "yaml" | "zig" | "r"
]

API reference

Function signature

Node.js

ui.code(
    text: string,
    options?: {
        label?: string,
        description?: string,
        lang?: "ada" | "clojure" | "coffeescript" | /* ... */ | "r"
        style?: Style
    }
)

Python

ui.code(
    text: str,
    *,
    label: str = None,
    description: str = None,
    lang: Literal["ada", "clojure", "coffeescript", /* ... */, "r"] | None = None,
    style: Style | None = None,
)

Parameters

Node.js

text

required string

The code to format and display.

Python

text

required str

The code to format and display.

---

Node.js

properties.label

optional string

Display a label above the code block.

Python

label

optional str

Display a label above the code block.

---

Node.js

properties.description

optional string

Display a description between the label and the code block.

Python

description

optional str

Display a description between the label and the code block.

---

Node.js

properties.lang

optional string literal

The language to use for syntax highlighting. If not specified, Compose will attempt to infer the language from the code.

Python

lang

optional Literal

The language to use for syntax highlighting. If not specified, Compose will attempt to infer the language from the code.

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---