Markdown & components guide

This demo post collects everything you can write in the site's content: standard Markdown rendered with Comark plus interactive Svelte components.

Text and emphasis

You can use bold, italic, strikethrough and inline code. Links point to sites like Astro and open normally.

Block quotes are handy to highlight an idea or a reference. They can span several lines.

Lists

Unordered list:

• First item

• Second item

  • Nested
• Third item

Ordered list:

1. Define the collection in src/config/collections.json
2. Create the content in src/content/
3. The build generates the routes automatically

Table

Code

import { parse } from 'comark'
import highlight from 'comark/plugins/highlight'

const tree = await parse('# Hello **world**', { plugins: [highlight()] })
console.log(tree.nodes)

Images

Images are optimized at build time automatically:

Alert component

The Alert Svelte component is invoked with Comark's directive syntax and supports four variants: