---
title: "VitePress"
description: "Using Comark component syntax natively in VitePress via the comark syntax plugin."
canonical_url: "https://comark.dev/examples/frameworks/vitepress"
---
# VitePress

> Using Comark component syntax natively in VitePress via the comark syntax plugin.

<code-explorer org="comarkdown" repo="comark@81a416b278b0f304d7e7577c7ac6bbfc78414790" path="examples/1.frameworks/vitepress" defaultValue="demo.md"></code-explorer>

This example shows how to use Comark's `::` component syntax natively in VitePress — no wrapper component or custom renderer needed.

## How it works

- **`comark/plugins/syntax` plugin** — Added to VitePress's markdown-it config via `markdown.config(md)`, this enables the `::component{props}` syntax at the markdown-it level.
- **Global component registration** — Vue components like `Alert` are registered globally in the VitePress theme via `enhanceApp`, so `::alert{type="info"}` resolves to the `<Alert>` component.
- **Native coexistence** — Comark syntax works alongside all VitePress Markdown features (code blocks, tables, custom containers, GitHub alerts, etc.) since both use markdown-it.


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.