Kitchen sink

This page uses every Markdown feature and component available in ZenithDocs. Use it to check a theme at a glance.

Switch the accent preset to preview it on this page. Use the button in the header to toggle dark mode.

Backdrop styles, drawn behind the top of the page. Scroll back up after switching.

A regular paragraph with bold, italic, bold italic, strikethrough, inline code, highlighted text, CSS, H₂O and E = mc². Press Ctrl + Shift + P to open the command palette.

Links can point to another page, to a section of this page, or to an external site. Bare URLs are linked too: https://lumosframework.com.

A second paragraph follows, long enough to wrap on several lines, so you can judge the line height and measure of body text. Good documentation reads like a conversation: short sentences, concrete examples and a clear structure make it easy to skim.

This heading uses [#custom-anchor] to set its id.

• Unordered item
• Item with formatting and code
  • Nested item
  • Another nested item
    • Third level
• Last item

1. First step
2. Second step
   1. Nested ordered item
   2. Another one
3. Third step

• Completed task
• Another completed task
• Pending task

Documentation is a love letter that you write to your future self.

It can span several paragraphs, and contain code or formatting.

Content above the rule.

Content below the rule.

GitHub alerts are a Markdown extension supported on GitHub: a blockquote starting with [!TYPE]. ZenithDocs renders them as callouts, so the same file looks right both on GitHub and on your site. Each of the five alert types has its own style.

A code block without a language.

interface Options {
  name: string;
  excited?: boolean;
}

export function greet({ name, excited = false }: Options): string {
  return `Hello, ${name}${excited ? '!' : '.'}`;
}

const first = 'meta highlight';
const second = 'this line is highlighted from the meta';
const third = 'back to normal';

const regular = true;
const important = true;
const alsoRegular = true;

import zenith from 'zenith-docs';
export default { integrations: [zenith({ title: 'Docs' })] };

export default defineConfig({
  integrations: [
    starlight({ title: 'Docs' }),
    zenith({ title: 'Docs' }),
  ],
});

.card {
  padding: 1rem;
  border-radius: var(--radius-main);
  background: var(--background-2);
}

{
  "name": "my-docs",
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

---
const { name } = Astro.props;
---

<p class="hello">Hello, {name}!</p>

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

title: Kitchen sink
sidebar:
  label: Every element
  hidden: false

npx zenith build && npx zenith preview --open

const aVeryLongLine = 'This line is deliberately long so that the code block has to scroll horizontally instead of wrapping, which keeps the code readable.';

npm install github:AymericChaverot/zenith-docs

pnpm add github:AymericChaverot/zenith-docs

Built-in icons can be used anywhere with the Icon component:

ZenithDocs builds on Lumos¹ and Astro².