Test Post for Markdown Rendering

This document is a long, varied Markdown file intended to exercise your site's Markdown rendering pipeline (mdsvex, rehype, remark plugins, syntax highlighting, frontmatter handling, HAST transformations, etc.). It includes headings, lists, code blocks, tables, images, links, blockquotes, inline code, HTML snippets, and more.

Table of Contents

• Test Post for Markdown Rendering
  • Table of Contents
  • Headings and Text
    • Subheading Level 3
    • Subheading Level 3 — Long Paragraph
  • Lists
  • Code Blocks
  • Tables
  • Images and Links
    • Image with HTML fallback
  • Blockquotes and Notes
  • Inline Elements
  • HTML and Raw HAST-like Sections
  • Complex Example: Callout with Code and Links
  • Math and Footnotes (if supported)
  • Accessibility and ARIA
  • Large Lorem Section (to stress renderer)
  • Final Checklist
  • Conclusion

Headings and Text

Subheading Level 3

A paragraph of plain text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a nisl id neque volutpat venenatis. Integer efficitur, nisl sit amet pulvinar tempor, orci arcu facilisis erat, vitae feugiat ipsum lorem in nunc.

Another paragraph with a short list inline: apples, oranges, and bananas.

Subheading Level 3 — Long Paragraph

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer non ex nec lorem pharetra fermentum. Suspendisse potenti. Proin sed risus sit amet sapien faucibus ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lists

Unordered list:

• Item one
  • Nested item a
  • Nested item b
    • Deeply nested item i
• Item two
• Item three

Ordered list:

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Checklist (GitHub-flavored):

• Task done
• Task pending
• Task to consider

Code Blocks

Inline code: use npm run build to create a production bundle.

Fenced code block (JavaScript):

// Example: simple utility
export function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

Fenced code block (TypeScript with types):

type User = {
  id: number;
  name: string;
  email?: string;
};

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

Fenced code block (shell):

# build and serve locally
yarn install
yarn build
yarn preview

Code block with language hint for highlighting and long content:

def fibonacci(n):
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

print(fibonacci(30))

Tables

Complex table with alignment:

Images and Links

Inline image (relative, ensure file exists in static or src/lib/images):

Remote image:

Links:

• Internal link: Posts index
• External link: Svelte
• Anchor link: Go back to top

Image with HTML fallback

Blockquotes and Notes

Blockquote example: "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Nested blockquote:

Inner quote with emphasis.

Callout-style note (using admonition syntax if supported by plugins):

Note: This is a test note to ensure admonitions and callouts render correctly.

Inline Elements

Mixing emphases: italic, bold, bold italic, strikethrough.

Inline code and keyboard hint: Press Ctrl+C.

Emojis: 😄 🚀 🧪

HTML and Raw HAST-like Sections

Sometimes you want to include raw HTML. Ensure your pipeline allows it only if you trust the content.

<section class="raw-html">
  <h3>Raw HTML Section</h3>
  <p>This should be preserved as-is if `allowDangerousHtml` is enabled in the pipeline.</p>
  <ul>
    <li>Raw item 1</li>
    <li>Raw item 2</li>
  </ul>
</section>

Inline SVG example:

<svg width="100" height="30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="line">
  <rect width="100" height="30" fill="#eee" />
  <text x="10" y="20" font-size="12" fill="#333">SVG Inline</text>
</svg>

Complex Example: Callout with Code and Links

Example: Building a small component

Steps:

1. Create MyWidget.svelte
2. Import it into your page
3. Use <MyWidget /> with props

Example code:

<script>
  export let name = "Tester";
</script>

<div class="widget">Hello {name}</div>

<style>
  .widget {
    padding: 0.5rem;
    border: 1px solid var(--border);
  }
</style>

Math and Footnotes (if supported)

Inline math (LaTeX) — if you have a math plugin:

• Inline: $E = mc^2$
• Block:

$$ \int_{0}^{1} x^2 , dx = \tfrac{1}{3} $$

Footnotes example:

Here is a sentence with a footnote.1

Accessibility and ARIA

Ensure images include alt attributes and interactive elements are keyboard accessible.

Example WAI-ARIA snippet:

<button aria-pressed="false" id="toggle">Toggle</button>

Large Lorem Section (to stress renderer)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim, sapien in sollicitudin congue, eros felis luctus nibh, a dapibus lorem lacus sed augue. Integer tincidunt, nisl sed faucibus luctus, justo lacus congue lorem, non gravida ipsum elit eu mi. Vestibulum ultrices, augue vel efficitur tincidunt, nisl lorem interdum odio, sed luctus nibh nunc sed lectus. Curabitur ut sem ac urna suscipit mattis. Etiam vel magna ac lacus faucibus blandit. Sed at aliquam lorem. Vestibulum bibendum, nibh non ultricies tincidunt, mauris urna posuere mi, at ultricies neque magna et nisi.

(Repeat the above paragraph a few times to make the document long.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Integer quis magna sed neque lobortis faucibus. Suspendisse potenti. Aliquam erat volutpat. Donec in purus non libero convallis faucibus. Suspendisse potenti. Phasellus id sapien sit amet lorem luctus luctus. Proin rhoncus lectus ac risus bibendum, ac feugiat ante cursus. Integer ac urna nec risus ullamcorper convallis.

Final Checklist

• Headings
• Paragraphs
• Lists (ordered/unordered)
• Code blocks (several languages)
• Tables
• Images (local and remote)
• Links (internal/external)
• Blockquotes and callouts
• Raw HTML / HAST-like snippets
• Math and footnotes (optional)
• Accessibility hints

Conclusion

This file is intentionally long and dense to exercise your Markdown -> mdsvex -> content-collections -> Svelte rendering pipeline. Copy this content into data/posts/test.md (or overwrite your existing test.md) and run your usual build or preview command to validate rendering:

# from project root
yarn dev
# or
yarn build && yarn preview

If you want, I can save this directly to data/posts/test.md for you. Would you like me to write the file now?

Footnotes

1. This is the footnote text. It can span multiple lines and include code inline. ↩