Mockline v0.17.3

Code Preview

A component for displaying live previews of code examples with their source code.

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

A simple example

With Markdown Content

Bold text and italic text

Component Example

Multiple Code Blocks

Props

class
string

Additional classes to apply to the preview container.

preview-class
string

Classes to apply specifically to the preview section.

code-class
string

Classes to apply specifically to the code section.

Slots

default
any

The content to be previewed. Can include components, HTML, or Markdown.

code
string

The source code to be displayed. Supports multiple code blocks with different languages.

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
Fields
Components for displaying and grouping properties, parameters, and field documentation.