Back to Details

comark

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Comark - Skills Guide

Comark - 技能指南

A high-performance markdown parser with Comark (Components in Markdown) support, built on markdown-it, offering both string-based and streaming APIs.
一个基于 markdown-it 构建的高性能 Markdown 解析器，支持 Comark（Components in Markdown），并同时提供基于字符串和流式处理的 API。

Overview

概述

Comark extends standard markdown with a powerful component system while maintaining full compatibility with CommonMark and GitHub Flavored Markdown. It provides:
  • 🚀 High-performance parsing with markdown-it engine
  • 📦 Streaming support with buffered and incremental modes
  • ⚡ Real-time rendering with auto-close for incomplete syntax
  • 🔧 Comark component syntax for custom components
  • 🎨 Vue, React, Svelte & Angular renderers with custom component mapping
  • 📝 YAML frontmatter support
  • 📑 Automatic TOC generation
  • 🎯 Full TypeScript support
  • 🌈 Syntax highlighting with Shiki integration
Comark 在保持完全兼容 CommonMark 和 GitHub Flavored Markdown 的基础上，通过强大的组件系统扩展了标准 Markdown。它提供：
  • 🚀 高性能解析：采用 markdown-it 引擎
  • 📦 流式处理支持：提供缓冲模式和增量模式
  • ⚡ 实时渲染：自动闭合不完整语法
  • 🔧 Comark 组件语法：支持自定义组件
  • 🎨 Vue、React、Svelte 与 Angular 渲染器：支持自定义组件映射
  • 📝 YAML frontmatter 支持
  • 📑 自动生成目录
  • 🎯 完整 TypeScript 支持
  • 🌈 语法高亮：集成 Shiki

Package Information

包信息

  • Package Name: 
    comark
  • Installation: 
    npm install comark
    or 
    pnpm add comark
  • Exports:
    • Main parser: 
      comark
    • Vue components: 
      @comark/vue
    • React components: 
      @comark/react
    • Svelte components: 
      @comark/svelte
    • Angular components: 
      @comark/angular
    • HTML rendering: 
      @comark/html
    • ANSI terminal rendering: 
      @comark/ansi
    • Nuxt module: 
      @comark/nuxt
  • 包名： 
    comark
  • 安装： 
    npm install comark
    或 
    pnpm add comark
  • 导出：
    • 主解析器：
      comark
    • Vue 组件：
      @comark/vue
    • React 组件：
      @comark/react
    • Svelte 组件：
      @comark/svelte
    • Angular 组件：
      @comark/angular
    • HTML 渲染：
      @comark/html
    • ANSI 终端渲染：
      @comark/ansi
    • Nuxt 模块：
      @comark/nuxt

Quick Start

快速开始

Basic Usage

基本用法

typescript
import { parseMarkdown } from 'comark'

const content = `---
title: Hello World
---
typescript
import { parseMarkdown } from 'comark'

const content = `---
title: Hello World
---

Hello World

Hello World

This is markdown with :icon component.
::alert{type="info"} Important message :: `
const result = await parseMarkdown(content) console.log(result.nodes) // Markdown AST console.log(result.frontmatter) // { title: 'Hello World' } console.log(result.meta) // Additional metadata
undefined
This is markdown with :icon component.
::alert{type="info"} Important message :: `
const result = await parseMarkdown(content) console.log(result.nodes) // Markdown AST console.log(result.frontmatter) // { title: 'Hello World' } console.log(result.meta) // Additional metadata
undefined

Vue Rendering

Vue 渲染

vue
<template>
  <Markdown :value="content" />
</template>

<script setup lang="ts">
import { Markdown } from '@comark/vue'

const content = `# Hello World`
</script>
vue
<template>
  <Markdown :value="content" />
</template>

<script setup lang="ts">
import { Markdown } from '@comark/vue'

const content = `# Hello World`
</script>

React Rendering

React 渲染

tsx
import { Markdown } from '@comark/react'

export default function App() {
  return <Markdown value={content} />
}
tsx
import { Markdown } from '@comark/react'

export default function App() {
  return <Markdown value={content} />
}

Svelte Rendering

Svelte 渲染

svelte
<script lang="ts">
  import { Markdown } from '@comark/svelte'

  const content = `# Hello World`
</script>

<Markdown value={content} />
svelte
<script lang="ts">
  import { Markdown } from '@comark/svelte'

  const content = `# Hello World`
</script>

<Markdown value={content} />

Angular Rendering

Angular 渲染

typescript
import { Component } from '@angular/core'
import { Markdown } from '@comark/angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Markdown],
  template: `<comark-markdown [value]="content" />`,
})
export class AppComponent {
  content = `# Hello World`
}
typescript
import { Component } from '@angular/core'
import { Markdown } from '@comark/angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Markdown],
  template: `<comark-markdown [value]="content" />`,
})
export class AppComponent {
  content = `# Hello World`
}

Documentation Sections

文档章节

This guide is organized into focused sections covering different aspects of the package:
本指南按主题划分为多个章节，介绍该包的不同方面：

📝 1. Markdown Syntax

📝 1. Markdown 语法

Learn how to write Comark documents with complete syntax reference:
  • Standard Markdown: headings, text formatting, lists, links, images, blockquotes
  • Frontmatter: YAML metadata with special fields (title, depth, searchDepth)
  • Comark Components: block components (
    ::component
    ), inline components (
    :component
    ), properties, slots, nesting
  • Attributes: custom attributes on native markdown elements using 
    {...}
    syntax
  • Code Blocks: language specification, filename metadata, line highlighting, special characters
  • Task Lists: GFM-style checkboxes with 
    [x]
    and 
    [ ]
    syntax
  • Tables: GFM tables with alignment and inline markdown support
→ Read Full Markdown Syntax Guide
了解如何编写 Comark 文档，并查看完整的语法参考：
  • 标准 Markdown： 标题、文本格式、列表、链接、图片、引用块
  • Frontmatter： 包含特殊字段（title、depth、searchDepth）的 YAML 元数据
  • Comark 组件： 块级组件（
    ::component
    ）、内联组件（
    :component
    ）、属性、插槽、嵌套
  • 属性： 使用 
    {...}
    语法为原生 Markdown 元素添加自定义属性
  • 代码块： 语言声明、文件名元数据、行高亮、特殊字符
  • 任务列表： 使用 
    [x]
    和 
    [ ]
    语法的 GFM 风格复选框
  • 表格： 支持对齐和内联 Markdown 的 GFM 表格
→ 阅读完整 Markdown 语法指南

🔧 2. Parsing & Document Model

🔧 2. 解析与文档模型

Complete guide for parsing and working with 
MarkdownDocument
:
  • String Parsing: 
    parseMarkdown()
    function with options (autoUnwrap, autoClose)
  • Async Parsing: 
    parseMarkdown()
    with Shiki syntax highlighting
  • Document Structure: serializable 
    MarkdownDocument
    with compact array-based nodes
  • Rendering Documents: convert to HTML (
    renderHtmlFromDocument
    via 
    @comark/html
    ) or markdown (
    renderMarkdown
    via 
    comark/render
    )
  • Auto-close: automatic closing of unclosed syntax
  • Auto-unwrap: remove unnecessary paragraph wrappers from container components
→ Read Full Parsing & Document Model Guide
有关解析和处理 
MarkdownDocument
的完整指南：
  • 字符串解析： 带选项（autoUnwrap、autoClose）的 
    parseMarkdown()
    函数
  • 异步解析： 使用 Shiki 语法高亮的 
    parseMarkdown()
  • 文档结构： 可序列化的 
    MarkdownDocument
    ，使用紧凑的数组式节点
  • 文档渲染： 转换为 HTML（通过 
    @comark/html
    调用 
    renderHtmlFromDocument
    ）或 Markdown（通过 
    comark/render
    调用 
    renderMarkdown
    ）
  • 自动闭合： 自动闭合未闭合的语法
  • 自动解包： 从容器组件中移除不必要的段落包装
→ 阅读完整的解析与文档模型指南

⚛️ 3. Vue Rendering

⚛️ 3. Vue 渲染

Comprehensive guide for rendering in Vue applications:
  • Basic Usage: 
    Markdown
    component setup
  • Custom Components: mapping custom Vue components to Comark elements
  • Dynamic Loading: 
    componentsManifest
    for lazy-loaded components
  • Slots Support: named slots with 
    #slot-name
    syntax
  • Streaming Mode: real-time rendering with reactive content
  • Prose Components: pre-built styled components for standard elements
  • Error Handling: built-in error capture for streaming scenarios
  • Props Access: accessing 
    __node
    and parsed properties
→ Read Full Vue Rendering Guide
在 Vue 应用中进行渲染的综合指南：
  • 基本用法： 
    Markdown
    组件设置
  • 自定义组件： 将自定义 Vue 组件映射到 Comark 元素
  • 动态加载： 使用 
    componentsManifest
    懒加载组件
  • 插槽支持： 使用 
    #slot-name
    语法定义命名插槽
  • 流式模式： 通过响应式内容进行实时渲染
  • Prose 组件： 为标准元素提供预构建的样式组件
  • 错误处理： 内置针对流式场景的错误捕获
  • Props 访问： 访问 
    __node
    和已解析的属性
→ 阅读完整的 Vue 渲染指南

⚛️ 4. React Rendering

⚛️ 4. React 渲染

Comprehensive guide for rendering in React applications:
  • Basic Usage: 
    Markdown
    component setup
  • Custom Components: mapping custom React components to Comark elements
  • Dynamic Loading: 
    componentsManifest
    for lazy-loaded components
  • Props Conversion: automatic HTML attribute conversion (
    class
    → 
    className
    , etc.)
  • Streaming Mode: real-time rendering with reactive content
  • Prose Components: pre-built styled components for standard elements
  • Custom Props: accessing parsed properties and 
    __node
  • CSS Class Name: custom wrapper classes and Tailwind CSS integration
→ Read Full React Rendering Guide
在 React 应用中进行渲染的综合指南：
  • 基本用法： 
    Markdown
    组件设置
  • 自定义组件： 将自定义 React 组件映射到 Comark 元素
  • 动态加载： 使用 
    componentsManifest
    懒加载组件
  • Props 转换： 自动转换 HTML 属性（
    class
    → 
    className
    等）
  • 流式模式： 通过响应式内容进行实时渲染
  • Prose 组件： 为标准元素提供预构建的样式组件
  • 自定义 Props： 访问已解析的属性和 
    __node
  • CSS 类名： 自定义包装器类名并集成 Tailwind CSS
→ 阅读完整的 React 渲染指南

🎡 5. Svelte Rendering

💡 5. Svelte 渲染

Comprehensive guide for rendering in Svelte 5 applications:
  • Basic Usage: 
    Markdown
    component setup with 
    $state
  • Custom Components: mapping custom Svelte components to Comark elements
  • Dynamic Loading: 
    componentsManifest
    for lazy-loaded components
  • Props Mapping: attribute-to-prop conversion (close to HTML semantics)
  • Streaming Mode: real-time rendering with reactive 
    $state
  • Experimental Async: 
    MarkdownAsync
    with 
    <svelte:boundary>
  • Prose Components: 
    Prose
    prefix for overriding native HTML elements
→ Read Full Svelte Rendering Guide
在 Svelte 5 应用中进行渲染的综合指南：
  • 基本用法： 使用 
    $state
    设置 
    Markdown
    组件
  • 自定义组件： 将自定义 Svelte 组件映射到 Comark 元素
  • 动态加载： 使用 
    componentsManifest
    懒加载组件
  • Props 映射： 接近 HTML 语义的属性到 Prop 转换
  • 流式模式： 通过响应式 
    $state
    进行实时渲染
  • 实验性异步： 使用 
    <svelte:boundary>
    的 
    MarkdownAsync
  • Prose 组件： 使用 
    Prose
    前缀覆盖原生 HTML 元素
→ 阅读完整的 Svelte 渲染指南

🅰️ 6. Angular Rendering

🅰️ 6. Angular 渲染

Comprehensive guide for rendering in Angular 17+ applications:
  • Basic Usage: 
    Markdown
    standalone component setup
  • Custom Components: mapping Angular components to Comark elements
  • Component Resolution: 
    Prose{PascalTag}
    , 
    PascalTag
    , 
    tag
    priority order
  • Content Projection: named slots via 
    <ng-content select="[slot=name]">
  • Streaming Mode: real-time rendering with caret indicator
  • Data Binding: 
    :binding
    resolution with ambient 
    data
    input
  • Pre-configured Components: 
    defineMarkdownComponent
    and 
    defineMarkdownDocumentComponent
  • Plugins: Math (KaTeX), Mermaid, Binding with Angular component wrappers
→ Read Full Angular Rendering Guide
在 Angular 17+ 应用中进行渲染的综合指南：
  • 基本用法： 
    Markdown
    standalone 组件设置
  • 自定义组件： 将 Angular 组件映射到 Comark 元素
  • 组件解析： 
    Prose{PascalTag}
    、
    PascalTag
    、
    tag
    的优先级顺序
  • 内容投影： 通过 
    <ng-content select="[slot=name]">
    定义命名插槽
  • 流式模式： 使用光标指示器进行实时渲染
  • 数据绑定： 通过环境 
    data
    输入解析 
    :binding
  • 预配置组件： 
    defineMarkdownComponent
    和 
    defineMarkdownDocumentComponent
  • 插件： 使用 Angular 组件包装器实现 Math（KaTeX）、Mermaid 和 Binding
→ 阅读完整的 Angular 渲染指南

🤖 7. Using with AI Agents

🤖 7. 与 AI Agent 配合使用

Guide for integrating Comark in AI agent and LLM streaming workflows:
  • Streaming from LLMs: rendering incremental AI output in real time
  • Auto-Close: handling incomplete syntax from partial LLM tokens
  • Caret Indicator: showing a live cursor during generation
  • Framework Examples: Vue, React, Svelte, Angular streaming patterns
  • ANSI for CLIs: rendering AI output in terminal agents
→ Read Full Agents Guide
有关将 Comark 集成到 AI Agent 和 LLM 流式处理工作流中的指南：
  • 从 LLM 流式输出： 实时渲染增量 AI 输出
  • 自动闭合： 处理部分 LLM token 产生的不完整语法
  • 光标指示器： 在生成过程中显示实时光标
  • 框架示例： Vue、React、Svelte、Angular 流式处理模式
  • 用于 CLI 的 ANSI： 在终端 Agent 中渲染 AI 输出
→ 阅读完整的 Agent 指南

Key Features Deep Dive

核心功能深入解析

Comark Component Syntax

Comark 组件语法

Comark extends markdown with custom components while preserving readability:
markdown
<!-- Block Component -->
::alert{type="warning" .important}
This is a **warning** message with markdown support.
::

<!-- Inline Component -->
Check out this :icon-star{.text-yellow} component.

<!-- Component with Slots -->
::card
#header
Comark 在保持可读性的同时，通过自定义组件扩展 Markdown：
markdown
<!-- Block Component -->
::alert{type="warning" .important}
This is a **warning** message with markdown support.
::

<!-- Inline Component -->
Check out this :icon-star{.text-yellow} component.

<!-- Component with Slots -->
::card
#header

Title

Title

#content Main content
#footer Footer ::
undefined
#content Main content
#footer Footer ::
undefined

Markdown Document Model

Markdown 文档模型

Lightweight array-based structure for efficient processing:
typescript
interface MarkdownDocument {
  nodes: [
    ["h1", { "id": "hello" }, "Hello"],
    ["p", {}, "Text with ", ["strong", {}, "bold"], " word"],
    ["alert", { "type": "info" }, "Message"]
  ],
  frontmatter: {},
  meta: {}
}
用于高效处理的轻量级数组式结构：
typescript
interface MarkdownDocument {
  nodes: [
    ["h1", { "id": "hello" }, "Hello"],
    ["p", {}, "Text with ", ["strong", {}, "bold"], " word"],
    ["alert", { "type": "info" }, "Message"]
  ],
  frontmatter: {},
  meta: {}
}

Common Use Cases

常见使用场景

1. Static Site Generator

1. 静态站点生成器

typescript
import { parseMarkdown } from 'comark'
import { renderHtmlFromDocument } from '@comark/html'
import shiki from '@comark/html/plugins/shiki'

async function processMarkdownFile(filePath: string) {
  const content = await readFile(filePath, 'utf-8')

  const doc = await parseMarkdown(content, {
    plugins: [
      shiki({
        themes: { light: 'github-dark', dark: 'github-dark' },
      }),
    ],
  })

  return {
    html: await renderHtmlFromDocument(doc),
    frontmatter: doc.frontmatter,
    toc: doc.meta.toc
  }
}
typescript
import { parseMarkdown } from 'comark'
import { renderHtmlFromDocument } from '@comark/html'
import shiki from '@comark/html/plugins/shiki'

async function processMarkdownFile(filePath: string) {
  const content = await readFile(filePath, 'utf-8')

  const doc = await parseMarkdown(content, {
    plugins: [
      shiki({
        themes: { light: 'github-dark', dark: 'github-dark' },
      }),
    ],
  })

  return {
    html: await renderHtmlFromDocument(doc),
    frontmatter: doc.frontmatter,
    toc: doc.meta.toc
  }
}

2. Real-time Markdown Editor

2. 实时 Markdown 编辑器

tsx
import { useState } from 'react'
import { Markdown } from '@comark/react'

export default function Editor() {
  const [content, setContent] = useState('# Hello')

  return (
    <div className="split-editor">
      <textarea value={content} onChange={e => setContent(e.target.value)} />
      <Markdown value={content} />
    </div>
  )
}
tsx
import { useState } from 'react'
import { Markdown } from '@comark/react'

export default function Editor() {
  const [content, setContent] = useState('# Hello')

  return (
    <div className="split-editor">
      <textarea value={content} onChange={e => setContent(e.target.value)} />
      <Markdown value={content} />
    </div>
  )
}

3. Batch File Processing

3. 批量文件处理

typescript
import { readFile } from 'node:fs/promises'
import { parseMarkdown } from 'comark'

async function processMultipleFiles(files: string[]) {
  const results = await Promise.all(
    files.map(async (file) => {
      const content = await readFile(file, 'utf-8')
      return await parseMarkdown(content)
    })
  )

  results.forEach((result, i) => {
    console.log(`File ${files[i]}:`)
    console.log(`  - ${result.nodes.length} nodes`)
  })
}
typescript
import { readFile } from 'node:fs/promises'
import { parseMarkdown } from 'comark'

async function processMultipleFiles(files: string[]) {
  const results = await Promise.all(
    files.map(async (file) => {
      const content = await readFile(file, 'utf-8')
      return await parseMarkdown(content)
    })
  )

  results.forEach((result, i) => {
    console.log(`File ${files[i]}:`)
    console.log(`  - ${result.nodes.length} nodes`)
  })
}

4. Documentation Platform

4. 文档平台

vue
<template>
  <article class="prose">
    <Markdown :value="markdownContent" :components="docComponents" />
  </article>
</template>

<script setup lang="ts">
import { Markdown } from '@comark/vue'
import { docComponents } from './components'
</script>
vue
<template>
  <article class="prose">
    <Markdown :value="markdownContent" :components="docComponents" />
  </article>
</template>

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

API Reference Summary

API 参考摘要

Core Functions (
comark
)

核心函数（
comark
）

typescript
// Asynchronous parsing
parseMarkdown(source: string, options?: ParserOptions): Promise<MarkdownDocument>

// Auto-close unclosed syntax
autoCloseMarkdown(source: string): string
typescript
// Asynchronous parsing
parseMarkdown(source: string, options?: ParserOptions): Promise<MarkdownDocument>

// Auto-close unclosed syntax
autoCloseMarkdown(source: string): string

HTML Rendering Functions (
@comark/html
)

HTML 渲染函数（
@comark/html
）

typescript
// Render markdown to HTML string (parse + render in one step)
renderHtml(markdown: string, options?: ParserOptions & RendererOptions): Promise<string>

// Render a pre-parsed document to HTML
renderHtmlFromDocument(document: MarkdownDocument, options?: RendererOptions): Promise<string>

// Create a reusable render function with shared parser instance
createHtmlRenderer(options?: ParserOptions & RendererOptions): (markdown: string) => Promise<string>
typescript
// Render markdown to HTML string (parse + render in one step)
renderHtml(markdown: string, options?: ParserOptions & RendererOptions): Promise<string>

// Render a pre-parsed document to HTML
renderHtmlFromDocument(document: MarkdownDocument, options?: RendererOptions): Promise<string>

// Create a reusable render function with shared parser instance
createHtmlRenderer(options?: ParserOptions & RendererOptions): (markdown: string) => Promise<string>

Vue Components (
@comark/vue
)

Vue 组件（
@comark/vue
）

vue
<Markdown :value="markdownString" :components="customComponents" />
vue
<Markdown :value="markdownString" :components="customComponents" />

React Components (
@comark/react
)

React 组件（
@comark/react
）

tsx
<Markdown value={markdownString} components={customComponents} />
tsx
<Markdown value={markdownString} components={customComponents} />

Svelte Components (
@comark/svelte
)

Svelte 组件（
@comark/svelte
）

svelte
<Markdown value={markdownString} components={customComponents} />
svelte
<Markdown value={markdownString} components={customComponents} />

Angular Components (
@comark/angular
)

Angular 组件（
@comark/angular
）

html
<comark-markdown [value]="markdownString" [components]="customComponents" />
html
<comark-markdown [value]="markdownString" [components]="customComponents" />

Performance Characteristics

性能特性

  • Serializable document model - compact array-based nodes
  • Lazy component loading - only load what's needed
  • Shiki highlighter caching - avoid re-initialization
  • Parallel processing - batch parse multiple files efficiently
  • 可序列化文档模型——使用紧凑的数组式节点
  • 组件懒加载——仅加载所需组件
  • Shiki 高亮器缓存——避免重复初始化
  • 并行处理——高效批量解析多个文件

TypeScript Support

TypeScript 支持

Full TypeScript definitions included:
typescript
import type {
  MarkdownDocument,
  Node,
  ParserOptions,
} from 'comark'
包含完整的 TypeScript 类型定义：
typescript
import type {
  MarkdownDocument,
  Node,
  ParserOptions,
} from 'comark'

Architecture Overview

架构概览

┌─────────────────────────────────────────┐
│         Markdown Input (String)         │
└────────────────┬────────────────────────┘
                 │
        ┌────────▼────────┐
        │  Auto-close     │ (Optional)
        │  Unclosed       │
        │  Syntax         │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Parse          │
        │  Frontmatter    │ (YAML)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  MarkdownIt     │
        │  + Plugins      │ (Comark, Tasks)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Token          │
        │  Processing     │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Comark         │
        │  AST            │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Auto-unwrap    │ (Optional)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Generate TOC   │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  MarkdownDocument     │
        │  (nodes + data  │
        │   + meta)       │
        └────────┬────────┘
                 │
     ┌───────────┬──────┴──────┬───────────┐
     ▼           ▼            ▼           ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│   Vue   │ │  React  │ │ Svelte  │ │ Angular │
│ Renderer│ │ Renderer│ │ Renderer│ │ Renderer│
└─────────┘ └─────────┘ └─────────┘ └─────────┘
┌─────────────────────────────────────────┐
│         Markdown Input (String)         │
└────────────────┬────────────────────────┘
                 │
        ┌────────▼────────┐
        │  Auto-close     │ (Optional)
        │  Unclosed       │
        │  Syntax         │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Parse          │
        │  Frontmatter    │ (YAML)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  MarkdownIt     │
        │  + Plugins      │ (Comark, Tasks)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Token          │
        │  Processing     │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Comark         │
        │  AST            │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Auto-unwrap    │ (Optional)
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Generate TOC   │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  MarkdownDocument     │
        │  (nodes + data  │
        │   + meta)       │
        └────────┬────────┘
                 │
     ┌───────────┬──────┴──────┬───────────┐
     ▼           ▼            ▼           ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│   Vue   │ │  React  │ │ Svelte  │ │ Angular │
│ Renderer│ │ Renderer│ │ Renderer│ │ Renderer│
└─────────┘ └─────────┘ └─────────┘ └─────────┘

Contributing & Testing

贡献与测试

See the test specifications for examples of all supported syntax features.
Run tests:
bash
pnpm test
Run specific test:
bash
pnpm test -- tests/parse.test.ts
有关所有受支持语法功能的示例，请参阅测试规范。
运行测试：
bash
pnpm test
运行特定测试：
bash
pnpm test -- tests/parse.test.ts

Resources

资源

  • README: README.md - Installation and quick start
  • Specifications: SPEC/ - Complete syntax test cases
  • README： README.md——安装与快速开始
  • 规范： SPEC/——完整的语法测试用例

Summary

总结

Comark is a comprehensive solution for parsing and rendering markdown with component support. It excels at:
  1. Extending Markdown - Component syntax without breaking compatibility
  2. Streaming Support - Real-time rendering with auto-close
  3. Serializable Documents - Efficient 
    MarkdownDocument
    model with compact nodes
  4. Framework Support - First-class Vue, React, Svelte, and Angular integration
  5. Developer Experience - Full TypeScript support and comprehensive documentation
Choose Comark when you need:
  • Markdown with custom components
  • Streaming/incremental parsing
  • Real-time markdown editors
  • AI-generated content rendering
  • Documentation platforms
  • Static site generation with custom components
Next Steps:
  • 📝 Learn Markdown Syntax
  • 🔧 Master Parsing & AST
  • ⚛️ Explore Vue Rendering
  • ⚛️ Explore React Rendering
  • 🎡 Explore Svelte Rendering
  • 🅰️ Explore Angular Rendering
  • 🤖 Use with AI Agents
Comark 是一套用于解析和渲染支持组件的 Markdown 的综合解决方案，尤其擅长：
  1. 扩展 Markdown——提供组件语法，同时不破坏兼容性
  2. 流式处理支持——通过自动闭合实现实时渲染
  3. 可序列化文档——使用紧凑节点提供高效的 
    MarkdownDocument
    模型
  4. 框架支持——提供 Vue、React、Svelte 和 Angular 一流集成
  5. 开发者体验——完整的 TypeScript 支持和详尽文档
在以下情况下选择 Comark：
  • 需要包含自定义组件的 Markdown
  • 流式或增量解析
  • 实时 Markdown 编辑器
  • AI 生成内容渲染
  • 文档平台
  • 使用自定义组件的静态站点生成
后续步骤：
  • 📝 学习 Markdown 语法
  • 🔧 掌握解析与 AST
  • ⚛️ 探索 Vue 渲染
  • ⚛️ 探索 React 渲染
  • 💡 探索 Svelte 渲染
  • 🅰️ 探索 Angular 渲染
  • 🤖 与 AI Agent 配合使用