Markdown Render Test — Full Format Verification
This document exercises every Markdown / MDX element supported by the astrofu pipeline. If anything renders incorrectly, fix it here before migrating any real content.
Headings & Anchors
H3 — Should Have a Trailing # Anchor
Each heading above should render a clickable # on the right via rehype-autolink-headings (behavior: 'append'). Clicking it should jump to the corresponding fragment URL.
H4 — Deeper Heading
Inline Formatting
Bold text, italic text, strikethrough, inline code, and a hyperlink to Astro docs.
Superscript: x2, subscript: H2O.
Mixed: bold with code inside and italic with a link.
Lists
Unordered
- First item
- Second item
- Nested item A
- Nested item B
- Third item
Ordered
- Step one
- Step two
- Step three
Task List
- Completed task
- Pending task
- Another done item
Blockquotes
This is a simple blockquote. It can span multiple lines.
Nested quote:
This is a nested blockquote. It should render with deeper left border.
Tables
| Feature | Status | Notes |
|---|---|---|
| Headings | ✅ | h1–h4 tested |
| Images | ✅ | See below |
| Code blocks | ✅ | Shiki dual-theme |
| GitHub Alerts | ✅ | NOTE / TIP / WARN |
Right-aligned:
| Name | Score |
|---|---|
| Alice | 95 |
| Bob | 87 |
Images — Primary Focus
1. Small Image (200x100)
Should display at natural size, centered within prose container. No overflow.
2. Medium Image (800x400)
Should scale down if viewport is narrower than 800px. Should remain centered with proper figcaption.
3. Wide / Oversized Image (1600x600)
Critical test: must NOT overflow the prose container. Should scale to max-width: 100% and remain centered.
4. Image with Title Attribute
Hovering should display “Hover over this image to see a tooltip”.
5. Image as a Link
Clicking the image should navigate to / (home page).
6. Image with Long Alt Text (Figcaption Check)
The <figcaption> element (if generated by prose.css) should wrap the alt text below the image.
7. Inline Image Within Paragraph
Here is an inline image: — it should sit on the same line as the text, vertically aligned to the baseline or middle.
Code Blocks
Plain (no language)
This is a plain code block with no language specified.
It should still render with the default theme colors.
TypeScript with Highlight
function greet(name: string): string {
console.log('hello', name)
return `Hi, ${name}!`
}
greet('astrofu')
Diff
- const old = 'Vite-SSG'
+ const next = 'Astro'
Word Highlight
const message = 'hello world'
GitHub Alerts
Note
This is a note alert. It should render with a blue left border and an i icon.
Tip
This is a tip alert. Green left border, lightbulb icon.
Warning
This is a warning alert. Orange left border, warning icon.
Caution
This is a caution alert. Red left border, stop icon.
MagicLink Component
These should render with their respective logo icons:
HTML Inline Tags
Line break with
forced break.
Click to expand details
Hidden content revealed on click. This tests raw HTML in MDX.
Horizontal Rule
Above and below should render <hr> elements.
Final Checklist
- All headings have
#anchor links - Images display centered, no overflow on wide image
- ImageZoom works on all images (click to fullscreen)
- Dark mode: images still visible, no broken backgrounds
- Code blocks switch theme with dark/light mode
- GitHub Alerts render with correct colors/icons
- MagicLink components show logos
- Table alignment correct
- Task list checkboxes render