Code Block

Display formatted code snippets with syntax highlighting and copy functionality.

Default

A standard code block with language label and copy button.

html
javascript 
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("World");
console.log(message);
<div class="uc-rounded-lg uc-bg-neutrals-subtle uc-overflow-hidden">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-2 uc-border-b">
    <span class="uc-text-xs uc-text-fg-disabled">javascript</span>
    <button class="copy-btn">...</button>
  </div>
  <pre class="uc-p-4 uc-font-mono uc-text-sm"><code>...</code></pre>
</div>

With Line Numbers

Code block with line numbers for easier reference.

html
typescript 
1interface User {
2  id: string;
3  name: string;
4  email: string;
5  role: "admin" | "user";
6}
7
8function getUser(id: string): User {
9  return fetchUser(id);
10}
<div class="uc-rounded-lg uc-bg-neutrals-subtle uc-overflow-hidden">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-2 uc-border-b">
    <span class="uc-text-xs uc-text-fg-disabled">typescript</span>
    <button class="copy-btn">...</button>
  </div>
  <div class="uc-p-4">
    <pre class="uc-font-mono uc-text-sm"><code>
      <table class="uc-border-collapse uc-w-full">
        <tbody>
          <tr><td class="uc-text-fg-disabled uc-text-right uc-pr-4 uc-select-none uc-border-r">1</td><td class="uc-pl-4">interface User {</td></tr>
          ...
        </tbody>
      </table>
    </code></pre>
  </div>
</div>

With Highlighted Lines

Highlight specific lines to draw attention to important code.

html
javascript
const app = express();
app.get("/api/users", (req, res) => {
const users = db.getUsers();
res.json(users);
});
app.listen(3000);
<div class="uc-rounded-lg uc-bg-neutrals-subtle uc-overflow-hidden">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-2 uc-border-b">
    <span class="uc-text-xs uc-text-fg-disabled">javascript</span>
    <button class="copy-btn">...</button>
  </div>
  <div class="uc-font-mono uc-text-sm uc-text-fg-primary">
    <div class="uc-px-4 uc-py-0.5">const app = express();</div>
    <div class="uc-px-4 uc-py-0.5 uc-bg-accents-blue/5 uc-border-l-2 uc-border-accents-blue">app.get("/api/users", (req, res) => {</div>
    ...
  </div>
</div>

Inline Code

Use inline code for short code references within text.

html

Use const for variables that won't be reassigned, and let for variables that will change.

Import components with import Button from './Button' to use them in your templates.

The function returns Promise<User[]> which resolves to an array of user objects. You can handle errors using try...catch blocks or the .catch() method.

Run npm install to install dependencies, then npm run dev to start the development server on localhost:3000. 

<div class="uc-space-y-4 uc-text-sm uc-text-fg-primary">
  <p>
    Use <code class="uc-rounded uc-bg-neutrals-muted uc-px-1.5 uc-py-0.5">const</code> for variables that won't be reassigned.
  </p>
  ...
</div>

With Tabs

Switch between multiple languages or file variants.

html 
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));
def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))
<div class="uc-rounded-lg uc-bg-neutrals-subtle uc-overflow-hidden">
  <div class="uc-flex uc-items-center uc-border-b">
    <div class="uc-flex">
      <button class="uc-px-4 uc-py-2 uc-text-xs uc-font-medium uc-bg-neutrals-surface" data-tab="js">JavaScript</button>
      <button class="uc-px-4 uc-py-2 uc-text-xs uc-font-medium uc-text-fg-disabled" data-tab="ts">TypeScript</button>
      ...
    </div>
    <button class="copy-btn">...</button>
  </div>
  <div class="uc-p-4">
    <pre class="uc-font-mono uc-text-sm"><code>...</code></pre>
  </div>
</div>

Terminal

Terminal-style code block for CLI commands and output.

html
terminal 
$ npm install
added 156 packages in 3.2s

$ npm run build
> my-app@1.0.0 build
> astro build

 generating static routes
 ▶ src/pages/index.astro
 ▶ src/pages/about.astro
 ▶ src/pages/components/button.astro
 ✓ Completed in 1.24s

 build complete!
<div class="uc-rounded-lg uc-bg-neutrals-subtle uc-overflow-hidden">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-4 uc-py-2 uc-border-b">
    <div class="uc-flex uc-items-center uc-gap-2">
      <div class="uc-flex uc-gap-1.5">
        <span class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-red/50"></span>
        <span class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-orange/50"></span>
        <span class="uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue/50"></span>
      </div>
      <span class="uc-text-xs uc-text-fg-disabled">terminal</span>
    </div>
    <button class="copy-btn">...</button>
  </div>
  <div class="uc-p-4">
    <pre class="uc-font-mono uc-text-sm"><code>...</code></pre>
  </div>
</div>