Getting started
Usage
Register the vega plugin for parse-time SVG or pair it with the Vue renderer for interactive charts.
Plugin only (parse-time SVG / static docs)
import { parseMarkdown } from 'comark'
import vega from 'comark-vega'
const tree = await parseMarkdown(content, {
plugins: [vega()],
})
Use ::vl, ::vg, ::chart, or mark shortcuts when you want inline SVG at parse time.
Plugin + Vue renderer (recommended for apps)
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import vega, { Vega } from 'comark-vega/vue'
</script>
<template>
<Suspense>
<Markdown
:plugins="[vega()]"
:components="{ Vega }"
>{{ content }}</Markdown>
</Suspense>
</template>
Then use fenced blocks or ::vega in Markdown:
```vega-lite
{ "mark": "bar", "data": { "values": […] }, "encoding": { … } }
```
::vega{:spec="report.chart" engine="vega-lite"}
Custom renderers
React / Svelte renderers can follow the same export shape later (comark-vega/react, …). Until then, use mountVegaView from comark-vega (or comark-vega/vue) in a custom component.
import type { VegaNodeAttrs } from 'comark-vega'
import { mountVegaView } from 'comark-vega'
See Entry points for fenced vs directive syntax.