Render Comark in React

import { Comark } from '@comark/react'

const content = `# Hello World

This is **markdown** with Comark components.
`

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

<Comark options={{ autoUnwrap: true, autoClose: true }}>
  {content}
</Comark>

import { Comark } from '@comark/react'
import highlight from '@comark/react/plugins/highlight'
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'

const plugins = [
  highlight({
    themes: { light: githubLight, dark: githubDark }
  })
]

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

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

export default function App() {
  return (
    <Comark
      markdown={markdown}
      components={{ Math, Mermaid }}
      plugins={[math(), mermaid()]}
    />
  )
}

import { Comark } from '@comark/react'

const manifest = (name: string) => {
  return import(`./components/prose/${name}.tsx`)
}

export default function App() {
  return <Comark componentsManifest={manifest}>{content}</Comark>
}

import { Comark } from '@comark/react'

const user = { name: 'Ada', role: 'admin' }
const content = `Hello, :badge{:label="data.user.name"}!`

export default function App() {
  return <Comark markdown={content} data={{ user }} />
}

import { defineComarkComponent } from '@comark/react'
import highlight from '@comark/react/plugins/highlight'
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'
import toc from '@comark/react/plugins/toc'
import math, { Math } from '@comark/react/plugins/math'
import CodeBlock from './components/CodeBlock'

// Base: highlight + shared prose overrides, used everywhere
const BaseComark = defineComarkComponent({
  name: 'BaseComark',
  plugins: [highlight({ themes: { light: githubLight, dark: githubDark } })],
  components: { pre: CodeBlock },
})

// Article: extends Base, adds TOC and math
export const ArticleComark = defineComarkComponent({
  name: 'ArticleComark',
  extends: BaseComark,
  plugins: [toc({ depth: 3 }), math()],
  components: { Math },
})

// Comment: extends Base only — no TOC, no math
export const CommentComark = defineComarkComponent({
  name: 'CommentComark',
  extends: BaseComark,
})

'use client'

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

export const DocsComark = defineComarkComponent({
  name: 'DocsComark',
  plugins: [math()],
  components: { Math },
})

import { DocsComark } from '@/components/comark'

export default async function Page({ params }: { params: { slug: string } }) {
  const content = await getDocContent(params.slug)
  return <DocsComark>{content}</DocsComark>
}

import { createParse } from 'comark'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
import { ComarkRenderer } from '@comark/react'
import Alert from '@/components/Alert'

const parse = createParse()

export default async function DocsPage({ params }: { params: { slug: string } }) {
  const markdown = await readFile(join('content', `${params.slug}.md`), 'utf-8')
  const tree = await parse(markdown)

  return <ComarkRenderer tree={tree} components={{ alert: Alert }} />
}

import { defineComarkRendererComponent } from '@comark/react'
import CodeBlock from './components/CodeBlock'
import ProseA from './components/ProseA'
import Alert from './components/Alert'
import CommentAlert from './components/CommentAlert'

const BaseRenderer = defineComarkRendererComponent({
  name: 'BaseRenderer',
  components: { pre: CodeBlock, a: ProseA },
})

export const ArticleRenderer = defineComarkRendererComponent({
  name: 'ArticleRenderer',
  extends: BaseRenderer,
  components: { alert: Alert },
})

export const CommentRenderer = defineComarkRendererComponent({
  name: 'CommentRenderer',
  extends: BaseRenderer,
  components: { alert: CommentAlert },
})

import { useState } from 'react'
import { Comark } from '@comark/react'

export default function AiChat() {
  const [content, setContent] = useState('')
  const [isStreaming, setIsStreaming] = useState(false)

  async function askAI(prompt: string) {
    setContent('')
    setIsStreaming(true)

    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ prompt }),
    })

    const reader = response.body!.getReader()
    const decoder = new TextDecoder()
    let accumulated = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      accumulated += decoder.decode(value, { stream: true })
      setContent(accumulated)
    }

    setIsStreaming(false)
  }

  return (
    <Comark streaming={isStreaming} caret>
      {content}
    </Comark>
  )
}

{/* Default caret */}
<Comark streaming={isStreaming} caret>{content}</Comark>

{/* Custom caret class */}
<Comark streaming={isStreaming} caret={{ class: 'my-caret' }}>{content}</Comark>

import type { ComponentType } from 'react'
import type { ComarkPlugin } from 'comark'
import { Comark } from '@comark/react'

interface Props {
  content: string
  components?: Record<string, ComponentType<any>>
  plugins?: ComarkPlugin[]
}

export default function ComarkWrapper({ content, components, plugins }: Props) {
  return <Comark components={components} plugins={plugins}>{content}</Comark>
}

import type { ComarkElement } from 'comark'

interface HeadingProps {
  __node?: ComarkElement
  id?: string
  children: React.ReactNode
}

export default function Heading({ __node, id, children }: HeadingProps) {
  const Tag = __node?.[0] || 'h2'
  return <Tag id={id}>{children}</Tag>
}