qwik-docs

Overview

Code blocks are a core part of any documentation site. This page demonstrates all code block features.

Inline Code

Use backticks for inline code. For example: const x = 42, npm install, or <div class="example">.

Basic Code Blocks

A plain code block with no language specified:

This is a plain code block.
No syntax highlighting is applied.
It preserves whitespace and line breaks.

Language-Specific Syntax Highlighting

JavaScript

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

TypeScript

interface User {
  id: number;
  name: string;
  email: string;
  roles: ('admin' | 'editor' | 'viewer')[];
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

const users: User[] = [
  { id: 1, name: 'Alice', email: 'alice@example.com', roles: ['admin'] },
  { id: 2, name: 'Bob', email: 'bob@example.com', roles: ['editor', 'viewer'] },
];

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <header>
      <h1>Welcome</h1>
      <nav>
        <a href="/about">About</a>
        <a href="/docs">Docs</a>
      </nav>
    </header>
    <main>
      <p>Hello, world!</p>
    </main>
  </body>
</html>

CSS

:root {
  --color-primary: #6366f1;
  --color-bg: #ffffff;
  --font-body: system-ui, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a2e;
  }
}

JSON

{
  "name": "@qwik-docs/kitchen-sink",
  "version": "0.0.1",
  "dependencies": {
    "@builder.io/qwik": "^1.19.0",
    "@qwik-docs/framework": "0.0.1"
  },
  "scripts": {
    "dev": "vite --mode ssr",
    "build": "qwik build"
  }
}

YAML

title: My Documentation
sidebar:
  - label: Getting Started
    items:
      - label: Introduction
        link: /docs/intro/
      - label: Installation
        link: /docs/install/
  - label: Reference
    autogenerate:
      directory: docs/reference

Bash / Shell

# Install dependencies
npm install @qwik-docs/framework @qwik-docs/components

# Start the dev server
npm run dev

# Build for production
npm run build && npm run preview

Python

from dataclasses import dataclass
from typing import Optional

@dataclass
class Config:
    title: str
    description: Optional[str] = None
    draft: bool = False

    def to_dict(self) -> dict:
        return {
            "title": self.title,
            "description": self.description,
            "draft": self.draft,
        }

Diff

- const oldValue = "before";
+ const newValue = "after";

  function unchanged() {
-   return oldApi();
+   return newApi({ format: 'v2' });
  }

Long Lines

const veryLongVariableName = someFunction(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive, argumentSix);

Empty Code Block