Writing Markdown

Content in vike-vue-content is parsed by comark. It's compatible with standard Markdown while also supporting MDC (MarkDown Components) extensions — letting you attach attributes and embed Vue components right in your Markdown.

Basic syntax

All standard Markdown works out of the box:

# Heading 1
## Heading 2

**bold**, *italic*, `inline code`, ~~strikethrough~~.

- Unordered list
- List item
  - Nested item

1. Ordered list
2. Second item

> Blockquote

[Link](https://vike.dev)
![Image](/logo.svg)

| Header | Header |
| --- | --- |
| Cell | Cell |

Headings are collected into the page's table of contents (TOC) and get anchor ids automatically.

Code blocks

Wrap code in triple backticks and tag the language to enable syntax highlighting:

const msg: string = 'hello'

```ts
const msg: string = 'hello'
```

Callouts

GitHub-style callout syntax is supported:

An informational note.

A warning message.

> [!NOTE]
> An informational note.

> [!WARNING]
> A warning message.

MDC inline attributes

Attach attributes to an element with a trailing {...} block. Works on links, inline code, emphasis, and more:

Emphasized link

code

Some text

[Emphasized link](https://vike.dev){.text-primary target="_self"}

`code`{.highlight}

[Some text]{#my-anchor .note}

Syntax conventions:

• {.class-name} — add a class
• {#id-name} — add an id
• {key="value"} — add any attribute

The most common use is controlling how links open — see Components · Link.

MDC components

Use :: syntax to embed Vue components in Markdown.

Block components (paired ::):

::alert{type="warning"}
This goes into the component's default slot.
::

Inline components (:name[content]{attrs}):

This is a New badge.

This is a :badge[New]{.text-red} badge.

Component names map to Vue components you register via ContentRenderer's components map — see Components · ContentRenderer.

Next steps

• Frontmatter — page-level metadata
• Components — Link, ContentRenderer, and more