Render Comark in Vue

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

const content = `# Hello World

This is **markdown** with Comark components.
`
</script>

<template>
  <Suspense>
    <Comark>{{ content }}</Comark>
  </Suspense>
</template>

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

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

<script setup lang="ts">
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'

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

<template>
  <Suspense>
    <Comark :plugins="plugins">{{ content }}</Comark>
  </Suspense>
</template>

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

<template>
  <Suspense>
    <Comark
      :markdown="markdown"
      :components="{ math: Math, mermaid: Mermaid }"
      :plugins="[math(), mermaid()]"
    />
  </Suspense>
</template>

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

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

<template>
  <Comark :components-manifest="manifest">{{ content }}</Comark>
</template>

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

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

<template>
  <Suspense>
    <Comark :markdown="content" :data="{ user }" />
  </Suspense>
</template>

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

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

// 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,
})

import { defineComarkRendererComponent } from '@comark/vue'
import ProsePre from './components/ProsePre.vue'
import ProseA from './components/ProseA.vue'
import CustomAlert from './components/Alert.vue'
import CommentAlert from './components/CommentAlert.vue'

const BaseRenderer = defineComarkRendererComponent({
  name: 'BaseRenderer',
  components: { ProsePre, ProseA },
})

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

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      prose: true
    })
  ]
})

@import "tailwindcss";
@import "@nuxt/ui";

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

const content = ref('')
const isStreaming = ref(false)

async function askAI(prompt: string) {
  content.value = ''
  isStreaming.value = true

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

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

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

  isStreaming.value = false
}
</script>

<template>
  <Comark :streaming="isStreaming" caret>
    {{ content }}
  </Comark>
</template>

<!-- Default caret -->
<Comark :streaming="isStreaming" caret>{{ content }}</Comark>

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

<script setup lang="ts">
import type { Component } from 'vue'
import type { ComarkPlugin } from 'comark'
import { Comark } from '@comark/vue'

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

const props = defineProps<Props>()
</script>

<template>
  <Suspense>
    <Comark :components="props.components" :plugins="props.plugins">
      {{ props.content }}
    </Comark>
  </Suspense>
</template>

<script setup lang="ts">
import type { ComarkElement } from 'comark'

defineProps<{
  __node?: ComarkElement
  id?: string
}>()
</script>