MDC Syntax

Block, Inline, and Nesting

• ::name = block component (default slot is markdown body)
• :name = inline self-closing component
• :::name = block nested inside a block (add one colon per nesting level)
• Opening and closing colon counts must match

Props

Inline props use {key="value"} syntax after the component name:

::card{title="My Card" icon="i-lucide-sparkles" to="/en/docs"}

Multiline YAML props go between --- after the opening tag:

::card
---
title: My Card
icon: i-lucide-sparkles
to: /en/docs
---
Card body.
::

Boolean props are bare names (required). Frontmatter-bound props use :prop="frontmatterKey".

Named Slots

Use #slot-name on its own line inside the block:

::card
#header
Header content
#footer
Footer content
::

Inline Attributes

Attach classes, ids, and styles to any inline element:

[text]{.class #id style="color:red"}
`code`{color="error"}
**bold**{.text-primary}
:icon{name="i-lucide-star"}
```{lang="md"}

## Generic Wrappers

Use `::div` for custom layouts:

```md
::div{class="grid md:grid-cols-2 gap-4"}
Column 1
Column 2
::

Code-Block Extras

Fenced code blocks support filename labels and line highlighting:

```ts [example.ts]
function hello() {
  console.log('world')
}
```

Line highlighting with {3,5-7} after the language tag. Use a 4-backtick fence when you need to show a 3-backtick fence literally.

Inline coloring on code spans:

`x`{color="error"}
`y`{color="success"}
`z`{color="info"}

GitHub-Style Blockquote Alerts

> [!NOTE] This is a note
> [!TIP] This is a tip
> [!WARNING] This is a warning
> [!IMPORTANT] This is important
> [!CAUTION] This is a caution