Examples

Explore Comark examples to learn how to add Comark in your projects

Frameworks

Astro
A blog example using Comark with Astro content collections and React components.
Next.js
A blog example using Comark with Next.js App Router and React Server Components.
Nuxt
A minimal example showing how to use Comark Syntax with Nuxt UI.
VitePress
Using Comark component syntax natively in VitePress via the comark syntax plugin.

Vite

HTML Preview
A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support.
React
A minimal example showing how to use Comark with React and Vite.
Svelte
A minimal example showing how to use Comark with Svelte and Vite.
Vue
A minimal example showing how to use Comark with Vue and Vite.

Plugins

Binding (frontmatter + data)
Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.
Syntax Highlighting
Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.
JSON Render
Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.
Math formulas
Example showing how to use Comark with LaTeX math formulas in Vue and Vite.
Mermaid diagrams
Example showing how to use Comark with Mermaid diagrams in Vue and Vite.
Punctuation
Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.