<TinaMarkdown>
Renders a Tina rich-text field's AST into real Vue VNodes, through a Comark-style tuple adapter (comark-adapter.ts), no comark package dependency, structural sharing comes from Vue's own VDOM diffing.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
content | any | Yes | The rich-text field's AST value, straight from a Tina query result. |
components | Record<string, any> | No | Maps a tag the comark adapter emits to a Vue component instead of a literal HTML element: empty by default. See Advanced Rich-Text for the Mermaid opt-in example. |
Usage example
<script setup lang="ts">
const { data, isEditing, isInIframe } = useTina(response)
const post = computed(() => data.value?.post ?? {})
</script>
<template>
<div :data-tina-field="tinaField(post, 'body')">
<TinaMarkdown :content="post.body" />
</div>
</template>
Supported markdown
Paragraphs, headings (h1–h6), bold/italic text, links, images, ordered/unordered lists, blockquotes, <hr>, and code blocks all render through the standard HTML tags. A code block with lang: mermaid emits a tina-mermaid tag instead of <pre><code>: see <TinaMermaid> to render it.
Custom rich-text templates (Tina's {{ shortcode }} syntax or MDX-style embeds) render as a generic <div data-tina-type="..."> wrapper unless their tag is mapped through the components prop: see Advanced Rich-Text for the full explanation and the gotcha with format: 'md' collections.