Code Block Components

Display formatted code with syntax highlighting, copy buttons, and side-by-side comparisons.

The code-block component displays formatted code with syntax highlighting, copy buttons, and optional line numbers. Perfect for documentation, tutorials, and technical pages.

Variant: default

Simple code block with language label and copy button.

javascript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return { success: true };
}

greet('PageJSON');

Variant: titled

Code block with a filename header and macOS-style window dots. Great for showing file contents.

page.json

{
  "seo": {
    "title": "My Page | My Site",
    "description": "A page built with PageJSON"
  },
  "sections": [
    {
      "component": "hero",
      "variant": "simple",
      "data": {
        "heading": "Hello World"
      }
    }
  ]
}

Variant: side-by-side

Two code blocks displayed side by side. Perfect for showing input vs output, before vs after, or comparing different approaches.

Input (JSON)

{
  "component": "cta",
  "variant": "simple",
  "data": {
    "heading": "Get Started",
    "buttons": [
      { "text": "Sign Up", "style": "primary" }
    ]
  }
}

Output (HTML)

<section class="cta py-5">
  <div class="container text-center">
    <h3>Get Started</h3>
    <a href="#" class="btn btn-primary">
      Sign Up
    </a>
  </div>
</section>

Explore More Components

View All Components