Up to 50% off when you choose annual billing

Hwere is title

Here is long description of the blog post. Here is long description of the blog post. Here is long description of the blog post. Here is long description of the blog post.

avatar
Last Updated
Friday June 30, 2025
Sunset over the city

Blog Post — my-first-post

Welcome to a test article for the Markdown renderer. This document includes headings, lists, tables, code blocks, images, blockquotes, and other common Markdown elements so you can verify styling and behavior.

Quick summary

  • Title: Blog Post — my-first-post
  • Author: Jakob
  • Date: 2025-08-29

Metadata

FieldValue
AuthorJakob
Date2025-08-29
IDmy-first-post

Key points

  1. Prepare content locally.
  2. Render Markdown through the component.
  3. Verify lists, tables, and code blocks appear correctly.

Detailed checklist

  • Headings render
  • Paragraphs and inline code render (example: const x = 1)
  • Fenced code blocks render
  • Tables render
  • Nested lists render

Nested list example

  • Item A
    • Subitem A.1
    • Subitem A.2
      1. Sub-sub 1
      2. Sub-sub 2
  • Item B

Example code

JS example:

function greet(id) {
  return `Hello from post ${id}`;
}
// call
console.log(greet('my-first-post'));

Shell example:

# build and serve
npm run build
npm run dev

Large table example

IndexNameTypeDescription
1sample.mdfileContains Markdown content
2index.htmlfileMount point for the app
3assets/folderImages and static files
4really-long.mdfileLong content to test wrapping and overflow behavior
5data.csvfileComma separated values for import testing

More lists

  • Primary
    • Secondary A
      • Tertiary A.1
      • Tertiary A.2
    • Secondary B
  • Another primary item
  1. Ordered step one
  2. Ordered step two
    • substep a
    • substep b
  3. Ordered step three

Code fence edge cases

// multiline example with template-like content
const tpl = `Post id: ${'my-first-post'}`
console.log(tpl)

# run tests
npm run test -- --watch

Image (placeholder)

Placeholder image

Tip: Use the browser devtools to inspect the rendered HTML if something looks off.

Common issues & fixes

  • If code blocks show as plain text, confirm the renderer accepts fenced code blocks.
  • If tables collapse, ensure the CSS for the prose container includes table styles.

This markdown is generated reactively from the route param so server and client output match and the hydration error should be resolved.