<script setup lang="ts">
import { Comark } from '@comark/vue'
import Alert from './components/Alert.vue'

const content = `# Hello World

This is **markdown** with a custom component:

::alert{type="info"}
Welcome to Comark!
::
`
</script>

<template>
  <Suspense>
    <Comark :components="{ Alert }">{{ content }}</Comark>
  </Suspense>
</template>

When using async plugins (like syntax highlighting), wrap <Comark> in a <Suspense> component. See Vue Rendering for details.

Learn more about Vue Rendering.

React

Use the components prop to pass your custom components to the <Comark> component.

App.tsx

import { Comark } from '@comark/react'
import Alert from './Alert.tsx'

const content = `# Hello World

This is **markdown** with Comark components.

::alert{type="info"}
This is an alert!
::
`

export default function App() {
  return <Comark components={{ Alert }}>{content}</Comark>
}

Learn more about React Rendering.

HTML (No Framework)

For server-side rendering or static generation without a framework:

import { parse } from 'comark'
import { renderHTML } from 'comark/string'

const tree = await parse(`# Hello World

This is **markdown** with a custom component:

::alert{type="info"}
Welcome to Comark!
::
`)

const html = renderHTML(tree)
console.log(html)

<h1 id="hello-world">Hello World</h1>
<p>This is <strong>markdown</strong> with a custom component:</p>
<alert type="info">
  <p>Welcome to Comark!</p>
</alert>

Use the components option in renderHTML to control how custom components are rendered to HTML. See HTML Rendering for details.

Next Steps

Components

Learn the component syntax for blocks, inline elements, props, and slots

Attributes

Add classes, IDs, and custom attributes to Markdown elements

Vue Rendering

Full Vue integration with custom components and streaming

React Rendering

Full React integration with custom components

Plugins

Add syntax highlighting, math, mermaid diagrams, and more

Parse API

Detailed parsing options, streaming, and error handling

Edit this pageorReport an issue

Introduction

Comark is a powerful Markdown parser that extends standard Markdown with component syntax, enabling rich, interactive content in Vue and React applications.

Markdown

Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more.