Skip to content

comarkdown/comark

Repository files navigation

Comark banner

comark

npm version npm downloads CI Documentation license

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)

License

Made with ❤️

Published under MIT License.

About

A high-performance Markdown parser and renderer for Vue, React, Svelte, HTML and ANSI.

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors