A blog example using Comark with Astro content collections and React components.
comark-syntax.md
---
title: Comark Syntax Guide
description: A quick tour of what you can do with Comark's component syntax.
pubDate: 2025-12-15
tags: [comark, syntax, components]
---
Comark is **Components in Markdown** — it extends standard Markdown with a powerful component syntax.
## Inline formatting
You can use all the usual Markdown formatting: **bold**, *italic*, `code`, and [links](https://comark.dev).
## Components
Components use the `::` syntax. They can have attributes and children:
::alert{type="warning"}
Pay attention to the double-colon syntax — it's how Comark identifies components.
::
## Lists
Comark handles lists, of course:
- First item
- Second item with **bold** text
- Third item with `inline code`
1. Numbered items work too
2. With full Markdown support inside
## Code blocks
Syntax highlighting works out of the box:
```js
function greet(name) {
return `Hello, ${name}!`
}
```
## Block quotes
> Comark makes Markdown more powerful without sacrificing simplicity.
::alert{type="danger"}
Don't forget to close your components with `::` — otherwise `autoClose` will handle it for you!
::
This example demonstrates how to use Comark with Astro content collections and React components. Blog posts are stored as .md files with Zod-validated frontmatter, loaded via the glob() loader, and rendered using ComarkRenderer from comark/react with custom components like Alert.
How it works
- Content collections — Posts are defined with
glob()loader and a Zod schema for type-safe frontmatter (title, description, pubDate, tags). - Comark parsing — In the blog post page,
parse()converts the raw Markdown body into a Comark AST. - React rendering —
ComarkRendererfromcomark/reactrenders the AST using React components, including custom ones likeAlert. Thanks to Astro's React integration, these are server-rendered with zero client-side JavaScript.