Interactive Features Showcase

This page demonstrates every interactive feature available when writing krowdev content. Use it as a reference when creating new articles.

Code Blocks

Every fenced code block automatically gets a language badge, a copy button (hover to reveal), and proper Catppuccin syntax highlighting.

def fibonacci(n):
    """Generate the first n Fibonacci numbers."""
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

for num in fibonacci(10):
    print(num)

# Install dependencies and build
npm install
npm run build
npm run preview

SELECT users.name, COUNT(posts.id) AS post_count
FROM users
LEFT JOIN posts ON users.id = posts.author_id
GROUP BY users.name
HAVING post_count > 5
ORDER BY post_count DESC;

Line Highlighting

Use mark={lines} in the code fence meta to highlight specific lines:

function greet(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

Diff Notation

Use ins={lines} and del={lines} to show additions and removals:

function createUser(name, email) {
  return {
    name,
    email,
    role: 'viewer',
    role: 'editor',
    createdAt: Date.now(),
  };
}

Editor and Terminal Frames

Code blocks auto-detect their frame type. Use title="filename" for editor tabs:

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

Shell languages get terminal frames automatically:

npm install astro-expressive-code

Collapsible Sections

Use collapse={lines} to collapse less-important lines:

4 collapsed lines
interface BlogPost {
  title: string;
  date: Date;
  tags: string[];
  content: string;
  draft: boolean;
}

function publishPost(post: BlogPost): void {
  if (post.draft) {
    throw new Error('Cannot publish a draft');
  }
  // ... publish logic
}

Callout Boxes

Eight types, each with a Catppuccin accent color:

Challenge Blocks

Interactive exercises that expand on click:

---
interface Props {
  name: string;
}
const { name } = Astro.props;
---

<h2>Hello, {name}!</h2>

<style>
  h2 { color: var(--accent); }
</style>

Code View Tabs

The Source / Compiled / Rendered pattern for showing how Astro transforms code:

---
interface Props { label: string; color?: string; }
const { label, color = 'var(--accent)' } = Astro.props;
---

<span class="badge" style={`--badge-color: ${color}`}>
  {label}
</span>

<style>
  .badge {
    display: inline-flex;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--badge-color);
    border: 1px solid var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
  }
</style>

<span class="badge" style="--badge-color: var(--accent)"
      data-astro-cid-x7q2k1>
  beginner
</span>

<style>
  .badge[data-astro-cid-x7q2k1] {
    display: inline-flex;
    padding: 0.15rem 0.6rem;
    /* ... scoped to this component only */
  }
</style>