Code

Code blocks display source code or configuration with automatic syntax highlighting. Set the language parameter to enable language-aware highlighting for Python, JavaScript, TypeScript, SQL, Bash, JSON, HTML, CSS, YAML, and Markdown.

Basic Usage

Multiple Languages

Dynamic Content

Code content supports expression interpolation, so you can display server-generated output:

from prefab_ui.components import Code
from prefab_ui.rx import Rx

query_result = Rx("query_result")
Code(query_result, language="sql")

API Reference

Code Parameters

content

str

required

Code content. Can be passed as a positional argument.

language

str | None

default:"None"

Language for syntax highlighting. Supported: python, javascript/js, typescript/ts, json, bash/sh, sql, html, xml, css, yaml/yml, markdown/md.

css_class

str | None

default:"None"

Additional Tailwind CSS classes.

Protocol Reference

Code

{
  "type": "Code",
  "id?": "string",
  "onMount?": "any",
  "content": "string (required)",
  "language?": "string",
  "cssClass?": "string"
}

For the complete protocol schema, see Code.

Card

DataTable

⌘I

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Multiple Languages

Dynamic Content

API Reference

Code Parameters

Protocol Reference

​Basic Usage

​Multiple Languages

​Dynamic Content

​API Reference

Code Parameters

​Protocol Reference

Basic Usage

Multiple Languages

Dynamic Content

API Reference

Protocol Reference