v1.0.8

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="vt-rounded-lg vt-bg-surfaces-subtle vt-overflow-hidden">
  <div class="vt-code-header">
    <span class="vt-text-xs vt-text-mains-quaternary">javascript</span>
    <button class="copy-btn">...</button>
  </div>
  <pre class="vt-p-4 vt-font-mono vt-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="vt-rounded-lg vt-bg-surfaces-subtle vt-overflow-hidden">
  <div class="vt-code-header">
    <span class="vt-text-xs vt-text-mains-quaternary">typescript</span>
    <button class="copy-btn">...</button>
  </div>
  <div class="vt-p-4">
    <pre class="vt-font-mono vt-text-sm"><code>
      <table class="vt-border-collapse vt-w-full">
        <tbody>
          <tr><td class="vt-text-mains-quaternary vt-text-right vt-pr-4 vt-select-none vt-border-r">1</td><td class="vt-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="vt-rounded-lg vt-bg-surfaces-subtle vt-overflow-hidden">
  <div class="vt-code-header">
    <span class="vt-text-xs vt-text-mains-quaternary">javascript</span>
    <button class="copy-btn">...</button>
  </div>
  <div class="vt-font-mono vt-text-sm vt-text-mains-primary">
    <div class="vt-px-4 vt-py-0.5">const app = express();</div>
    <div class="vt-px-4 vt-py-0.5 vt-bg-info-primary/5 vt-border-l-2 vt-border-info-primary">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="vt-space-y-4 vt-text-sm vt-text-mains-primary">
  <p>
    Use <code class="vt-code-inline">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="vt-rounded-lg vt-bg-surfaces-subtle vt-overflow-hidden">
  <div class="vt-flex vt-items-center vt-border-b">
    <div class="vt-flex">
      <button class="vt-px-4 vt-py-2 vt-text-xs vt-font-medium vt-bg-surfaces-surface" data-tab="js">JavaScript</button>
      <button class="vt-px-4 vt-py-2 vt-text-xs vt-font-medium vt-text-mains-quaternary" data-tab="ts">TypeScript</button>
      ...
    </div>
    <button class="copy-btn">...</button>
  </div>
  <div class="vt-p-4">
    <pre class="vt-font-mono vt-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="vt-rounded-lg vt-bg-surfaces-subtle vt-overflow-hidden">
  <div class="vt-code-header">
    <div class="vt-flex vt-items-center vt-gap-2">
      <div class="vt-flex vt-gap-1.5">
        <span class="vt-w-3 vt-h-3 vt-rounded-full vt-bg-error-primary/50"></span>
        <span class="vt-w-3 vt-h-3 vt-rounded-full vt-bg-warning-primary/50"></span>
        <span class="vt-w-3 vt-h-3 vt-rounded-full vt-bg-info-primary/50"></span>
      </div>
      <span class="vt-text-xs vt-text-mains-quaternary">terminal</span>
    </div>
    <button class="copy-btn">...</button>
  </div>
  <div class="vt-p-4">
    <pre class="vt-font-mono vt-text-sm"><code>...</code></pre>
  </div>
</div>

Guidelines

Present multi-line snippets in a block with a language label and copy action; keep short references inline.

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

const message = greet("World");
console.log(message);
Do
Give a code block a language label and copy action.

Run const sum = a + b; const product = a * b; return sum + product; to compute the result.

Don't
Don't cram multi-line code into an inline span.

Use const for values that never change, and let for ones that do.

Do
Use inline code for short references inside prose.
javascript 
const
Don't
Don't wrap a single keyword in a full code block.

API Reference

All CSS classes and data attributes.

Class Type Description
vt-code-header Base Header bar above a code block — filename plus copy action
vt-code-inline Base Inline code fragment inside prose

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Code lives in pre + code elements so screen readers announce it as code
Copy action The copy button carries an aria-label and announces success via its label swap
Scroll Long code scrolls inside the block (overflow-x-auto) — the page never scrolls horizontally