Skip to main content
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 interpolation, so you can display server-generated output: 
from prefab_ui.components import Code

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",
  "content": "string (required)",
  "language?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Code.