Code Preview

Overview

The Code Preview component allows you to showcase code examples alongside their rendered output. It's particularly useful for documentation and tutorials where you want to demonstrate both the implementation and the result.

Usage

Basic Example

<template>
  <div class="p-4 bg-gray-100 rounded">
    A simple example
  </div>
</template>

With Markdown Content

**Bold text** and *italic text*

Component Example

<Button variant="primary">
  Click me
</Button>

Multiple Code Blocks

<template>
  <div class="flex gap-2">
    <Button variant="primary">
      Primary
    </Button>
    <Button variant="secondary">
      Secondary
    </Button>
  </div>
</template>

.button {
  @apply px-4 py-2 rounded;
}

Props

Slots

Best Practices

1. Content Organization:
   • Keep examples focused and concise
   • Show one concept per example
   • Include relevant code variations
   • Use meaningful examples
2. Code Clarity:
   • Include all necessary imports
   • Show complete, working examples
   • Use consistent formatting
   • Add comments for complex code
3. Preview Display:
   • Ensure preview accurately reflects the code
   • Test different screen sizes
   • Consider dark/light mode variations
   • Use appropriate spacing
4. Documentation:
   • Explain key concepts
   • Highlight important code parts
   • Show common use cases
   • Include edge cases when relevant