<TinaMarkdown>
Render AST field rich-text Tina jadi VNode Vue asli, lewat adapter tuple gaya Comark (comark-adapter.ts), nggak ada dependency package comark, structural sharing-nya dari VDOM diffing Vue sendiri.
Props
| Prop | Tipe | Wajib | Deskripsi |
|---|---|---|---|
content | any | Iya | Value AST field rich-text-nya, langsung dari hasil query Tina. |
components | Record<string, any> | Nggak | Mapping tag yang di-emit adapter comark ke komponen Vue tertentu, bukan elemen HTML biasa: kosong secara default. Lihat Rich-Text Lanjutan buat contoh opt-in Mermaid. |
Contoh pemakaian
<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>
Markdown yang didukung
Paragraf, heading (h1–h6), teks bold/italic, link, gambar, list berurut/nggak berurut, blockquote, <hr>, dan code block semuanya dirender lewat tag HTML standar. Code block dengan lang: mermaid ngeluarin tag tina-mermaid sebagai gantinya <pre><code>: lihat <TinaMermaid> buat ngerendernya.
Custom template rich-text (syntax {{ shortcode }} Tina atau embed ala MDX) dirender sebagai wrapper generic <div data-tina-type="..."> kecuali tag-nya dipetakan lewat prop components: lihat Rich-Text Lanjutan buat penjelasan lengkap dan gotcha soal collection format: 'md'.