comark

概要

• TypeScriptで記述されたMarkdownパーサーで、CommonMark/GFM（および小規模なコンポーネント/属性拡張）をコンパクトでシリアライズ可能なASTに変換します。
• ASTはビルド時、実行時、またはテキストのストリーミング中（例：LLMからの出力）に生成でき、その後、特定のフレームワーク用レンダラーによってレンダリングされます。

主な機能

• 純粋関数による解析 – parseMarkdown(md) はプレーンなJavaScript構造 (['tag', props, …children]) を返します。副作用がないため、データベース、CMS、またはライブLLM出力からのコンテンツを再ビルドなしで解析できます。
• ストリーミング対応 – パーサーが未完了の構文（太字、コードフェンス、コンポーネント）を自動的に閉じるため、AIが生成中の部分的な出力をフレームごとに表示できます。
• 1つのAST、多数のレンダラー – 同じASTをReact、Vue、Svelte、Angular、プレーンHTML、またはANSI端末出力用のレンダラーに渡すことができます。
• コンポーネント構文 – インラインのカスタムコンポーネントを ::component{…} … :: を使用してMarkdown内に記述できます（例：アラート、数式）。ネイティブ要素の属性は {.class} を介してサポートされます。
• プラグインエコシステム – Shiki構文ハイライト、KaTeX数式、Mermaid図、TOC、アラート、脚注用の組み込みプラグインに加え、既存の markdown-it プラグインとの互換性があります。
• パフォーマンス – markdown-it をTypeScriptで書き直した markdown-exit をベースに構築されています。

使用方法

1. コアパッケージをインストールします：

   npm install comark
   

2. MarkdownをASTに解析します：

   import { parseMarkdown } from 'comark'
   const tree = await parseMarkdown('# Hello **World**')
   // → { nodes: [['h1', { id: 'hello' }, 'Hello ', ['strong', {}, 'World']]], … }
   

3. UIスタックに一致するレンダラーパッケージを選択し、同じASTまたは生のMarkdown文字列を渡します。
   • Vue – @comark/vue
   • React – @comark/react
   • Svelte – @comark/svelte
   • Angular – @comark/angular
   • HTML – @comark/html
   • ANSI (ターミナル) – @comark/ansi
4. レンダリング時に必要に応じてプラグイン（例：KaTeX数式）やカスタムコンポーネントを追加します。

AI生成コンテンツにおける重要性

• LLMは部分的なMarkdownをストリーミングすることが多いため、Comarkの自動クローズロジックにより、モデルの入力中もUIを安定させることができます。
• シリアライズ可能なASTにより、解析済みの表現を保存または送信できるため、クライアント側での重複した解析を回避できます。
• パーサーがフレームワークに依存しないため、同じAI生成MarkdownをWebアプリ、ネイティブ風フレームワーク、またはターミナルツールで書き直すことなく表示できます。

パッケージ

パッケージ	用途
comark	コアパーサー、ASTユーティリティ、プラグインシステム
@comark/vue	Vue 3 レンダラー
@comark/react	React レンダラー (Next.js Server Componentsを含む)
@comark/svelte	Svelte 5 レンダラー
@comark/angular	Angular レンダラー
@comark/nuxt	自動インポート対応のNuxtモジュール
@comark/html	プレーンHTML文字列へのレンダリング
@comark/ansi	ターミナル用ANSIへのレンダリング

ライセンス

• MIT（「Made with ❤️」のフレンドリーな注記付き）。

結論 Comarkは、モダンでストリーミングを意識したMarkdownパーサー兼マルチフレームワークレンダラーです。ライブコンテンツやAI生成のMarkdownを、解析の高速性と一貫性を保ちながら、さまざまなフロントエンドで表示する必要がある開発者に最適です。