Nuxt
A minimal example showing how to use Comark Syntax with Nuxt UI.
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 Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both @comark/nuxt and @nuxt/ui modules to your Nuxt config, and the Markdown component will use Nuxt UI components automatically.
What does @comark/nuxt module do
- Registers the
<Markdown>and<MarkdownDocument>components in Nuxt for automatic import. Registers the
~/components/prosedirectory in the app and all layers as a global components directory.- This allows users to override prose components by creating components in this directory.
- Detects Nuxt UI and tells Nuxt UI to register its Prose components