Code Block

Display syntax-highlighted code snippets

import { CodeBlock } from "@plexui/ui/components/CodeBlock";

Examples

Overview

import ApiClient from "api-client";
const client = new ApiClient();

const stream = await client.completions.create({
  model: "model-4.1",
  messages: [{ role: "user", content: "Say 'double bubble bath' ten times fast." }],
  stream: true,
});

for await (const chunk of stream) {
  console.log(chunk.choices[0].delta);
}

Collapsible

type Props = { title: string; count: number };

const Header = ({ title, count }: Props) => (
  <h1>{title} ({count})</h1>
);

Collapsible — expanded by default

type Props = { title: string; count: number };

const Header = ({ title, count }: Props) => (
  <h1>{title} ({count})</h1>
);

Collapsible — custom height

interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));

Collapsible — max expanded height

interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));

Collapsible — without copy button

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def greet(self):
        print(f"Hi, I'm {self.name}")

Supported languages

import ApiClient from "api-client";
const client = new ApiClient();

const stream = await client.completions.create({
  model: "model-4.1",
  messages: [{ role: "user", content: "Say 'double bubble bath' ten times fast." }],
  stream: true,
});

for await (const chunk of stream) {
  console.log(chunk.choices[0].delta);
}
interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));
class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def greet(self):
        print(f"Hi, I'm {self.name}")
{
  "user": { "id": 1, "name": "Alice" },
  "roles": ["admin", "editor"],
  "active": true
}
git checkout -b feature/new-feature
git add .
git commit -m "Add new feature"
docker build -t myapp:latest .
.container {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.button:hover { cursor: pointer; }
SELECT u.id, u.name, COUNT(o.id) AS orders_count
FROM users u
JOIN orders o ON u.id = o.user_id
GROUP BY u.id, u.name;
package main

import "fmt"

func main() {
  fmt.Println("Hello, world")
}

Reference

CodeBlock

PropTypeDefaultDescription
childrenstringCode content
languagestringPrism language name
classNamestringAdditional wrapper class

CollapsibleCodeBlock

PropTypeDefaultDescription
childrenstringCode content
languagestringPrism language name
defaultExpandedbooleanfalseStart expanded
collapsedHeightnumber80Height when collapsed (px)
maxExpandedHeightnumberMax height when expanded (px)
copyablebooleantrueShow copy button