Styling test

This page exists to exercise every component and every markdown construct the viewer can render, so styling regressions are visible at a glance. It is not documentation — it is a test fixture. Check it in both light and dark mode.

Callouts

All four variants, back to back, to compare weight and contrast:

A callout with block content inside it, which is the case most likely to break spacing:

Code blocks

Plain fence, no metadata

No filename bar should appear here — just the frame, the copy button on hover, and a language-less body.

$ pnpm --filter site dev
  astro  v7.1.3 ready in 412 ms
  ┃ Local    http://localhost:3100/

Language, no title

const greeting: string = "hello";
console.log(greeting.toUpperCase());

Title and highlighted lines

The filename sits left, the language tag right. Lines 2 and 4-5 carry the tint and the left accent bar.

import { getCollection } from "astro:content";
const pages = await getCollection("docs");
// line 3 is deliberately not highlighted
const a = 1;
const b = 2;
const c = 3;

Every line highlighted

Checks that the tint does not compound or misalign when contiguous.

const one = 1;
const two = 2;
const three = 3;

Long lines (horizontal scroll)

The body should scroll sideways without the figure or the copy button moving.

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "bundler", "noEmit": true, "skipLibCheck": true, "allowJs": true, "strict": true, "jsx": "preserve", "types": [] } }

Many languages

pnpm install
pnpm --filter site build

{
  // Astro resolves @mdxctl/* to src/components
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {}
}

.mdx-content :where(pre) {
  background: var(--color-neutral);
  border-radius: var(--radius-box);
}

<figure class="code-block" data-code-block>
  <pre><code>hello</code></pre>
</figure>

def parse_lines(meta: str) -> set[int]:
    """Ranges like {2,4-6} become {2, 4, 5, 6}."""
    return {2, 4, 5, 6}

- const old = "removed";
+ const new = "added";
  const same = "context";

Unknown language

Falls back to plaintext rather than failing the build.

this should render as plain, unhighlighted text

Single-line and near-empty blocks

Checks vertical padding when there is almost no content.

1;

The <CodeBlock> component directly

Same chrome, but the code arrives as a prop rather than as a fence. Use this only when the code is computed — a fence is easier to write and needs no escaping.

const a = 1;
const b = 2;
const c = 3;

With wrap enabled, a long line should soft-wrap instead of scrolling:

const sentence = "this is a deliberately long single line of code that should wrap onto the next line instead of producing a horizontal scrollbar when wrap is enabled";

Headings

The h1 above is supplied by the page header, so the body starts at h2.

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Text immediately after a heading, to check the top margin does not collapse.

Text formatting

Body copy with bold text, italic text, bold italic, strikethrough, inline code, and a link to the docs. Inline code directly adjacent to bold and italic runs should not shift the baseline.

A second paragraph, to check the gap between consecutive paragraphs. It runs to a few lines so that line-height is actually visible rather than inferred from a single short line of text sitting alone on the page.

Line one with a hard break at the end,
line two after the break.

Special characters that MDX can choke on: {}, <>, &, \``, $, ${}, and a literal backslash `.

Lists

Unordered

• First item
• Second item, which is long enough to wrap onto a second line so the hanging indent and the bullet alignment can both be checked properly
• Third item
  • Nested item
  • Another nested item
    • Third level
• Fourth item with inline code and a link

Ordered

1. First step
2. Second step
   1. Nested step
   2. Another nested step
3. Third step

Mixed nesting

1. Ordered parent
   • Unordered child
   • Another child
2. Second parent

List with block content

• An item followed by a fenced block:

  pnpm --filter site dev

• An item followed by a paragraph.

  This paragraph belongs to the list item above it.

Task list

• Completed task
• Incomplete task
• Another incomplete task

Blockquotes

A single-line blockquote.

A longer blockquote that runs across several lines, to check the left border, the italic treatment and the opacity against both themes.

With a second paragraph inside the same quote.

Nested quoting:

The inner quote should still show its own border.

Tables

Alignment and a wider table that may need to scroll:

Horizontal rule

Content above the rule.

Content below the rule.

Images

Edge cases

Fence metadata that is malformed should be ignored rather than break the build. Neither of the next two blocks should show any highlighted lines:

const malformedRange = true;

const reversedRange = true;

A title using single quotes, including a space in the filename:

echo "deploying"

Inline code inside a heading:

A heading with inline code in it

And a paragraph directly after that heading.