comark

A high-performance markdown parser and renderer with Vue, React, Svelte, HTML and ANSI terminal.

Features

• 🚀 Fast markdown-exit based parser
• 📦 Stream API for buffered parsing
• 🔧 Comark component syntax support
• 🔒 Auto-close unclosed markdown syntax (perfect for streaming)
• 📝 Frontmatter parsing (YAML)
• 📑 Automatic table of contents generation
• 🎯 Full TypeScript support

Usage

Vue

npm install @comark/vue katex
# or
pnpm add @comark/vue katex

<script setup lang="ts">
import { Comark } from '@comark/vue'
import math, { Math } from '@comark/vue/plugins/math'

const chatMessage = ...
</script>

<template>
  <Comark :components="{ Math }" :plugins="[math()]">{{ chatMessage }}</Comark>
</template>

React

npm install @comark/react katex
# or
pnpm add @comark/react katex

import { Comark } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'

function App() {
  const chatMessage = ...
  return <Comark components={{ Math }} plugins={[math()]}>{chatMessage}</Comark>
}

Svelte

npm install @comark/svelte katex
# or
pnpm add @comark/svelte katex

<script lang="ts">
  import { Comark } from '@comark/svelte'
  import math, { Math } from '@comark/svelte/plugins/math'

  const chatMessage = ...
</script>

<Comark markdown={chatMessage} components={{ math: Math }} plugins={[math()]} />

HTML (No Framework)

npm install @comark/html
# or
pnpm add @comark/html

import { render } from '@comark/html'

const chatMessage = ...

const html = await render(chatMessage)

Agent skill

Coding agents can install the Comark skill from the docs site:

npx skills add https://comark.dev

See Installation on comark.dev for details.

License

Made with ❤️

Published under MIT License.