Code Block
Syntax-highlighted code blocks powered by tree-sitter.
Rust
Rust code with full syntax highlighting.
use std::sync::Arc;
use tokio::net::TcpListener;
use tokio::io::{AsyncReadExt, AsyncWriteExt};
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let listener = TcpListener::bind("127.0.0.1:8080").await?;
let db = Arc::new(Database::connect("postgres://localhost/app").await?);
loop {
let (mut socket, addr) = listener.accept().await?;
let db = Arc::clone(&db);
tokio::spawn(async move {
let mut buf = [0u8; 4096];
match socket.read(&mut buf).await {
Ok(n) if n > 0 => {
let response = db.query(&buf[..n]).await;
let _ = socket.write_all(&response).await;
}
_ => eprintln!("connection closed: {addr}"),
}
});
}
}Plain Text
Falls back to plain text when no language is specified.
$ cargo proa run -p proa_ui_marketing
proa_ui_marketing listening on http://127.0.0.1:3333
Rendered home in 42µsCustom Styling
Additional classes can be applied to the wrapper.
let x: i32 = 42;
let s: &str = "hello world";
println!("{s}: {x}");How It Works
- Uses tree-sitter for incremental, error-tolerant parsing
- Same parsers used by Zed, Neovim, and GitHub
- Tokens are wrapped in <span> elements with hl-* CSS classes
- Include SYNTAX_THEME_CSS once per page for GitHub Dark styling
- Behind the syntax-highlight feature flag to keep builds fast
ProCode Block
Tree-sitter backed syntax highlighting.
Proa UI Pro component source is proprietary and requires an accepted Proa UI Pro Commercial License Agreement. Subject to that agreement, the self-serve license includes the limited commercial Proa framework rights needed to use Proa UI Pro in closed-source products.
Install with the Proa CLIPro access
proa ui add code_blockRequires an active Proa UI Pro license and access to the private component registry.
CLI and registry setup