v1.0.0

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>