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

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

::code-explorer
```yaml [props]
org: comarkdown
repo: comark@81a416b278b0f304d7e7577c7ac6bbfc78414790
path: examples/1.frameworks/vitepress
defaultValue: demo.md
```
::

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.