### Install @vunk/markdown (Bash)

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/introduction/+Page.md

This command installs the @vunk/markdown package as a dependency for a project using pnpm. It adds the package to the project's dependencies, ensuring it can be used within the application.

```bash
pnpm install @vunk/markdown -S
```

--------------------------------

### Custom Fence Rendering with Shiki for Syntax Highlighting

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Illustrates how to customize the rendering of code blocks (fences) using the VkRendererTemplate. This example integrates the Shiki library to provide syntax highlighting for TypeScript code blocks, showcasing the extensibility of @vunk/markdown for rich code presentation.

```vue
<script setup>
import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault } from '@vunk/markdown'
import { codeToHtml } from 'shiki'
import { ref, watchEffect } from 'vue'

const source = `
```typescript
interface User {
  name: string
  age: number
}
```
`

// Custom fence renderer with Shiki
const ShikiFence = defineComponent({
  props: ['code', 'lang'],
  setup(props) {
    const html = ref('')
    watchEffect(async () => {
      if (props.code) {
        html.value = await codeToHtml(props.code, {
          lang: props.lang || 'text',
          theme: 'github-dark'
        })
      }
    })
    return () => h('div', { innerHTML: html.value })
  }
})
</script>

<template>
  <VkMarkdown :source="source">
    <VkTemplatesDefault />
    <VkRendererTemplate type="fence">
      <template #default="{ raw }">
        <ShikiFence
          :code="raw.content"
          :lang="raw.info?.split(' ')[0]"
        />
      </template>
    </VkRendererTemplate>
  </VkMarkdown>
</template>

```

--------------------------------

### TypeScript: Import VkTemplatesFence Component

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-fence/+Page.md

This code snippet shows how to import the `VkTemplatesFence` component from the `@vunk/markdown/components/templates-fence` module using TypeScript. This component provides container rendering strategies for code fences, simplifying the setup for custom fence rendering.

```typescript
import { VkTemplatesFence } from '@vunk/markdown/components/templates-fence'
```

--------------------------------

### Integrate KaTeX Plugin with Markdown-it in Vue

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Demonstrates how to extend markdown-it with the KaTeX plugin to render mathematical equations within a Vue application. It requires installing `@mdit/plugin-katex` and `katex`.

```vue
<script setup>
import { katex } from '@mdit/plugin-katex'
import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault } from '@vunk/markdown'
import 'katex/dist/katex.min.css'

const mathContent = `
# Mathematical Equations

Inline math: $E = mc^2$ represents mass-energy equivalence.

Block equations:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\frac{\partial^2 u}{\partial t^2} = c^2 \nabla^2 u
$$
`

// Setup markdown-it with katex plugin
const setupMarkdown = (md) => {
  md.use(katex, {
    throwOnError: false,
    errorColor: '#cc0000'
  })
}
</script>

<template>
  <VkMarkdown
    :source="mathContent"
    :markdown-it-setup="setupMarkdown"
  >
    <VkTemplatesDefault />

    <VkRendererTemplate type="math_block">
      <template #default="{ raw, md }">
        <div
          class="math-block"
          style="text-align: center; margin: 1rem 0;"
          v-html="md.renderer.render([raw], md.options, {})"
        />
      </template>
    </VkRendererTemplate>

    <VkRendererTemplate type="math_inline">
      <template #default="{ raw, md }">
        <span
          class="math-inline"
          v-html="md.renderer.render([raw], md.options, {})"
        />
      </template>
    </VkRendererTemplate>
  </VkMarkdown>
</template>
```

--------------------------------

### Basic VkMarkdown Component Usage with Streaming

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Demonstrates the fundamental use of the VkMarkdown component to render Markdown content. It simulates a streaming effect by progressively revealing the text, mimicking real-time output from AI models. This example requires Vue 3 and the @vunk/markdown library.

```vue
<script setup>
import { VkMarkdown, VkTemplatesDefault } from '@vunk/markdown'
import { ref, computed } from 'vue'

// Basic usage with streaming simulation
const fullText = `# Hello World

This is **bold** text and _italic_ text.

```javascript
console.log('Code block example')
```

- List item 1
- List item 2
`

const currentIndex = ref(0)
const streamingText = computed(() => fullText.slice(0, currentIndex.value))

// Simulate streaming from AI
const interval = setInterval(() => {
  if (currentIndex.value < fullText.length) {
    currentIndex.value++
  } else {
    clearInterval(interval)
  }
}, 50)
</script>

<template>
  <VkMarkdown
    :source="streamingText"
    :markdown-it-options="{ html: true, breaks: true }"
  >
    <VkTemplatesDefault />
  </VkMarkdown>
</template>

```

--------------------------------

### Define Custom Container Rendering Template with VkRendererTemplate Vue Component

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-container/+Page.md

This example demonstrates how to define a custom rendering template for a specific container type, in this case, 'warning'. It utilizes the `VkRendererTemplate` component and its default slot, which provides `raw` content and a `Renderer` component. The `raw.children` are passed to the `Renderer` to recursively render the content within the custom warning box.

```vue
<VkRendererTemplate type="container:warning">
  <template #default="{ raw, Renderer }">
    <!-- 自定义警告组件 -->
    <div class="warning-box">
      <h4>⚠️ 警告</h4>
      <Renderer :source="raw.children"></Renderer>
    </div>
  </template>
</VkRendererTemplate>
```

--------------------------------

### Configure Container Rendering in VkMarkdown Vue Component

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-container/+Page.md

This snippet shows how to configure the `VkMarkdown` component to handle custom container types. It specifies an array of container names to be processed and includes a placeholder for where the custom rendering templates would be defined. This setup enables the conversion of specific Markdown container blocks into interactive Vue components.

```vue
<VkMarkdown :source="markdownText" :containers="['warning']">
  <!-- 渲染模板 -->
</VkMarkdown>
```

--------------------------------

### Custom HTML Table Rendering with Vue and Element Plus

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

This example demonstrates intercepting HTML table tags within markdown using VkMarkdown for custom rendering. It utilizes Vue's `defineComponent` and Element Plus components (`ElTable`, `ElTableColumn`) to parse markdown table data into a structured, interactive table. The `VkRendererTemplate` is key for tag interception.

```vue
<script setup>
import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault } from '@vunk/markdown'
import { ElTable, ElTableColumn } from 'element-plus'
import { ref, defineComponent, watchEffect } from 'vue'

const tableMarkdown = `
| Name | Age | Role | Status |
|------|-----|------|--------|
| Alice | 28 | Developer | Active |
| Bob | 32 | Designer | Active |
| Charlie | 25 | Manager | Inactive |
`

// Custom table resolver component
const TableResolver = defineComponent({
  props: ['source'],
  setup(props, { slots }) {
    const data = ref([])
    const columns = ref([])

    watchEffect(() => {
      // Parse table tokens into structured data
      const tableToken = props.source.find(t => t.tag === 'table')
      if (!tableToken) return

      const thead = tableToken.children.find(t => t.tag === 'thead')
      const tbody = tableToken.children.find(t => t.tag === 'tbody')

      // Extract headers
      if (thead) {
        const headerRow = thead.children.find(t => t.tag === 'tr')
        columns.value = headerRow.children
          .filter(t => t.tag === 'th')
          .map(th => th.children.find(c => c.type === 'inline')?.content || '')
      }

      // Extract rows
      if (tbody) {
        data.value = tbody.children
          .filter(t => t.tag === 'tr')
          .map(tr => {
            const cells = tr.children.filter(t => t.tag === 'td')
            return columns.value.reduce((obj, col, idx) => {
              obj[col] = cells[idx]?.children.find(c => c.type === 'inline')?.content || ''
              return obj
            }, {})
          })
      }
    })

    return () => slots.default?.({ data: data.value, columns: columns.value })
  }
})
</script>

<template>
  <VkMarkdown
    :source="tableMarkdown"
    :tags="['table']"
  >
    <VkTemplatesDefault />

    <VkRendererTemplate type="tag:table">
      <template #default="{ raw }">
        <TableResolver :source="raw.children">
          <template #default="{ data, columns }">
            <ElTable :data="data" stripe border>
              <ElTableColumn
                v-for="col in columns"
                :key="col"
                :prop="col"
                :label="col"
              />
            </ElTable>
          </template>
        </TableResolver>
      </template>
    </VkRendererTemplate>
  </VkMarkdown>
</template>

```

--------------------------------

### Basic Usage of VkMarkdown Component (Vue)

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/introduction/+Page.md

Demonstrates the basic integration of the VkMarkdown component in a Vue 3 application. It shows how to bind Markdown content to the `source` prop and declare custom container types using the `containers` prop. It also illustrates the inclusion of default and container templates.

```vue
<VkMarkdown
  :source="markdownContent"
  :containers="['echarts']"
>
  <VkTemplatesDefault />
  <VkTemplatesContainer />
</VkMarkdown>
```

--------------------------------

### Markdown Parsing and Token Manipulation (JavaScript)

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Demonstrates the core markdown-it parsing and token manipulation utilities. It covers parsing markdown to tokens, converting tokens to a tree structure for rendering, extracting plain text, and reconstructing flat tokens. No external dependencies are explicitly mentioned for these core functions.

```javascript
const tokens = md.parse(source, {})
console.log('Flat tokens:', tokens.length)

const tree = tokensToTree(tokens, ['table'], ['mermaid'])
console.log('Tree structure:', tree)

const text = tokensToString(tree)
console.log('Plain text:', text)

const flatTokens = treeToTokens(tree)
console.log('Reconstructed tokens:', flatTokens.length)
```

--------------------------------

### Vue Template Rendering Strategy

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/load-templates/+Page.md

Demonstrates how to compose specific templates for rendering within a Vue application. This approach allows selective inclusion of template components like VkTemplatesDefault and VkTemplateMermaid, enabling a custom rendering strategy based on project needs.

```vue
<template>
  <VkRendererTemplates>
    <VkTemplatesDefault />
    <VkTemplateMermaid />

    <slot />
  </VkRendererTemplates>
</template>
```

--------------------------------

### RendererTemplate Slot Arguments - TypeScript

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render/+Page.md

Defines the structure of arguments passed to the default slot of the RendererTemplate component. It includes the raw matched data and the Renderer component for rendering nested content.

```typescript
export interface SlotArguments {
  /**
   * 匹配到的原始数据
   */
  raw: SourceItem

  /**
   * 传递 source: SourceItem[] 可渲染内容
   */
  Renderer: Component
}
```

--------------------------------

### Vue: Customize Code Fence Rendering with VkRendererTemplate

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-fence/+Page.md

This snippet demonstrates how to use the `VkRendererTemplate` component to customize the rendering of code fences. It targets fences of type `fence:card` and renders them using an Element Plus card component, displaying the fence's info as the header and its content within a pre tag. This allows for dynamic and structured presentation of code blocks.

```vue
<VkRendererTemplate type="fence:card">
  <template #default="{ raw }">
    <el-card :header="raw.info">
      <pre>{{ raw.content }}</pre>
    </el-card>
  </template>
</VkRendererTemplate>
```

--------------------------------

### Vue: Enable and Use VkTemplatesFence for Fences

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-fence/+Page.md

This Vue snippet illustrates how to enable and use the `VkTemplatesFence` component within a `VkMarkdown` component. By passing `['mermaid']` to the `fences` attribute of `VkMarkdown`, it specifies that mermaid fences should be processed. The `VkTemplatesFence` component is then included to apply its default rendering strategies to these enabled fences.

```vue
<VkMarkdown :fences="['mermaid']">
  <VkTemplatesFence />
</VkMarkdown>
```

--------------------------------

### Custom Container Blocks for Styled Alerts

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Demonstrates how to define custom container blocks in Markdown using the Container plugin and VkRendererTemplate. This allows for styled alert boxes (warning, info, danger) with custom content and formatting, enhancing the organization and visual appeal of documentation.

```vue
<script setup>
import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault } from '@vunk/markdown'

const markdown = `
:::warning Alert Title
This is a warning message with **formatted** content.
:::

:::info
Information box with automatic styling.
:::

:::danger
Critical error message.
:::
`
</script>

<template>
  <VkMarkdown
    :source="markdown"
    :containers="['warning', 'info', 'danger']"
  >
    <VkTemplatesDefault />

    <VkRendererTemplate type="container:warning">
      <template #default="{ raw, Renderer }">
        <div style="border: 2px solid orange; padding: 1rem; border-radius: 8px;">
          <h4 style="color: orange;">⚠️ {{ raw.info || 'Warning' }}</h4>
          <component :is="Renderer" :source="raw.children" />
        </div>
      </template>
    </VkRendererTemplate>

    <VkRendererTemplate type="container:info">
      <template #default="{ raw, Renderer }">
        <div style="border: 2px solid blue; padding: 1rem; background: #e3f2fd;">
          <component :is="Renderer" :source="raw.children" />
        </div>
      </template>
    </VkRendererTemplate>

    <VkRendererTemplate type="container:danger">
      <template #default="{ raw, Renderer }">
        <div style="border: 2px solid red; padding: 1rem; background: #ffebee;">
          <h4 style="color: red;">🚨 Danger</h4>
          <component :is="Renderer" :source="raw.children" />
        </div>
      </template>
    </VkRendererTemplate>
  </VkMarkdown>
</template>

```

--------------------------------

### Import and Use TemplatesContainer for Echarts Rendering Strategy

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-container/+Page.md

This code demonstrates how to import and use the `VkTemplatesContainer` component from `@vunk/markdown/components/templates-container`. It shows how to enable the 'echarts' rendering strategy by passing it in the `containers` prop of the `VkMarkdown` component and including the `VkTemplatesContainer` within the `VkMarkdown` component's children.

```javascript
import { VkTemplatesContainer } from '@vunk/markdown/components/templates-container'
```

```vue
<VkMarkdown :containers="['echarts']">
  <VkTemplatesContainer />
</VkMarkdown>
```

--------------------------------

### Render Mermaid Diagrams with Streaming and Error Handling using Vue

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

This code snippet shows how to use VkMarkdown to render Mermaid diagrams. It supports streaming content and includes basic error handling implicitly through Mermaid's rendering. The primary dependency is '@vunk/markdown'.

```vue
<script setup>
import { VkMarkdown, VkTemplatesDefault, VkTemplatesFence } from '@vunk/markdown'

const diagramSource = `
# System Architecture

```mermaid
graph TD
    A[Client] -->|HTTP Request| B[API Gateway]
    B --> C{Load Balancer}
    C -->|Route| D[Service 1]
    C -->|Route| E[Service 2]
    D --> F[(Database)]
    E --> F
```

## User Flow

```mermaid
sequenceDiagram
    participant User
    participant App
    participant API
    participant DB

    User->>App: Login Request
    App->>API: Authenticate
    API->>DB: Query User
    DB-->>API: User Data
    API-->>App: Token
    App-->>User: Success
```
`
</script>

<template>
  <VkMarkdown
    :source="diagramSource"
    :fences="['mermaid']"
  >
    <VkTemplatesDefault />
    <VkTemplatesFence />
  </VkMarkdown>
</template>

```

--------------------------------

### GroupToken Interface - TypeScript

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render/+Page.md

Defines the interface for a GroupToken, which represents nested Markdown structures. It includes the HTML tag name, opening and closing tokens, and an array of child tokens.

```typescript
export interface GroupToken extends __VkRenderer.SourceItem {
  tag: string // HTML 标签名（如 'div', 'p', 'blockquote'）
  open: BasicToken // 开始标签的 Token
  close: BasicToken // 结束标签的 Token
  children: RendererToken[] // 子元素数组
}
```

--------------------------------

### Convert Markdown Tokens to Tree and Back with @vunk/markdown

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Provides core utilities for managing markdown tokens, specifically converting between flat token arrays and nested tree structures using `tokensToTree` and `treeToTokens`. It also includes `tokensToString` for converting tokens back into a markdown string. This is essential for advanced markdown manipulation.

```typescript
import { tokensToTree, treeToTokens, tokensToString } from '@vunk/markdown'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const source = `

```

--------------------------------

### RendererToken Structure for vunk-markdown Parsing

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/parse/+Page.md

Defines the TypeScript interface for a RendererToken, which represents a node in the nested tree structure generated by the parsing module. This structure is used by the renderer to determine how to display content, with 'templateType' dictating the rendering strategy.

```typescript
interface RendererToken {
  templateType: string // 渲染模板类型
  type?: string // 原始 token 类型
  tag?: string // HTML 标签
  content?: string // 文本内容
  children?: RendererToken[] // 子节点
}
```

--------------------------------

### GroupToken Default Rendering - Vue SFC

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render/+Page.md

Provides the default rendering logic for GroupToken in Vue SFC using VkRendererTemplate. It dynamically renders an HTML tag with its children, maintaining the structure.

```vue
<VkRendererTemplate type="GroupToken">
  {{
            default: (ctx) => {
      const Renderer = ctx.Renderer
      const Tag = ctx.raw.tag        // 获取标签名
      const children = ctx.raw.children  // 获取子元素
      return (
        <Tag><Renderer source={children}></Renderer></Tag>
      )
    }
  }}
</VkRendererTemplate>
```

--------------------------------

### Render ECharts Charts with Streaming Updates using Vue

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

This snippet demonstrates how to use VkMarkdown to render ECharts charts directly from YAML or JSON configuration. It also shows how to simulate streaming data updates to dynamically refresh the chart. Dependencies include '@vunk/markdown' and Vue's reactivity system.

```vue
<script setup>
import { VkMarkdown, VkTemplatesDefault, VkTemplatesContainer } from '@vunk/markdown'
import { ref } from 'vue'

const chartMarkdown = ref(`
::: mendorong
```yaml
title:
  text: Monthly Sales Report
  left: center
xAxis:
  type: category
  data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
yAxis:
  type: value
series:
  - name: Sales
    type: bar
    data: [120, 200, 150, 80, 70, 110]
    itemStyle:
      color: '#5470c6'
```
:::
`)

// Simulate streaming data updates
setTimeout(() => {
  chartMarkdown.value = `
::: mendorong
```json
{
  "title": { "text": "Real-time Sales", "left": "center" },
  "xAxis": {
    "type": "category",
    "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
  },
  "yAxis": { "type": "value" },
  "series": [{
    "name": "Sales",
    "type": "line",
    "smooth": true,
    "data": [120, 200, 150, 80, 70, 110, 250]
  }]
}
```
:::
`
}, 2000)
</script>

<template>
  <VkMarkdown
    :source="chartMarkdown"
    :containers="['echarts']"
  >
    <VkTemplatesDefault />
    <VkTemplatesContainer />
  </VkMarkdown>
</template>

```

--------------------------------

### Define Custom Renderer Template for Tags

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-tag/+Page.md

Use the VkRendererTemplate component to define custom rendering logic for specific tags. The 'type' attribute follows the 'tag:{tagName}' format for matching, and the 'default' slot receives the raw tag content.

```vue
<VkRendererTemplate type="tag:table">
  <template #default="{ raw }">
    <!-- Custom table component -->
    <MyCustomTable :data="raw" />
  </template>
</VkRendererTemplate>
```

--------------------------------

### Extract JSON/YAML from Markdown Tokens with VkResolverJson in Vue

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Demonstrates the use of `VkResolverJson` from `@vunk/markdown` to extract and parse JSON or YAML content from specific markdown token children. This is useful for embedding configuration blocks, such as those used for charting libraries, directly within markdown.

```vue
<script setup>
import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault, VkResolverJson } from '@vunk/markdown'
import { VkEchart } from '@vunk/echarts'

const configMarkdown = `
:::chart-config
```yaml
title:
  text: Performance Metrics
series:
  - name: Response Time
    type: line
    data: [120, 132, 101, 134, 90, 230, 210]
```
:::
`
</script>

<template>
  <VkMarkdown
    :source="configMarkdown"
    :containers="['chart-config']"
  >
    <VkTemplatesDefault />

    <VkRendererTemplate type="container:chart-config">
      <template #default="{ raw }">
        <VkResolverJson :source="raw.children">
          <template #default="{ json, language, description }">
            <div>
              <p v-if="description">Description: {{ description }}</p>
              <p>Language: {{ language }}</p>
              <VkEchart :option="json" style="height: 400px;" />
            </div>
          </template>
        </VkResolverJson>
      </template>
    </VkRendererTemplate>
  </VkMarkdown>
</template>
```

--------------------------------

### Auto-repair Streaming JSON with useJsonrepair in Vue

Source: https://context7.com/eralchen/vunk-markdown/llms.txt

Utilizes the `useJsonrepair` composable from `@vunk-markdown/composables` to automatically fix and parse incomplete or malformed JSON data, commonly encountered in streaming AI responses. It watches for changes in the JSON input and provides the parsed result or an error.

```vue
<script setup>
import { useJsonrepair } from '@vunk-markdown/composables'
import { ref, watch } from 'vue'

// Simulate streaming JSON from AI
const streamingJson = ref('')
const messages = [
  '{"name"',
  '{"name":',
  '{"name": "Alice"',
  '{"name": "Alice",',
  '{"name": "Alice", "age"',
  '{"name": "Alice", "age": 28',
  '{"name": "Alice", "age": 28, "role": "Dev',
  '{"name": "Alice", "age": 28, "role": "Developer"}'
]

let index = 0
const interval = setInterval(() => {
  if (index < messages.length) {
    streamingJson.value = messages[index++]
  } else {
    clearInterval(interval)
  }
}, 500)

// Auto-repair JSON as it streams
const { json, error } = useJsonrepair(streamingJson)

watch([json, error], ([jsonValue, errorValue]) => {
  if (errorValue) {
    console.log('Waiting for valid JSON...')
  } else if (jsonValue) {
    console.log('Parsed JSON:', jsonValue)
  }
})
</script>

<template>
  <div>
    <h3>Streaming JSON:</h3>
    <pre>{{ streamingJson }}</pre>

    <h3>Parsed Result:</h3>
    <div v-if="error" style="color: red;">
      Incomplete: {{ error }}
    </div>
    <pre v-else>{{ JSON.stringify(json, null, 2) }}</pre>
  </div>
</template>
```

--------------------------------

### Configure Custom Tag Rendering in VkMarkdown

Source: https://github.com/eralchen/vunk-markdown/blob/master/docs/pages/zh-CN/guide/render-tag/+Page.md

Specify custom tags for rendering within the VkMarkdown component by using the 'tags' attribute. This allows vunk-markdown to identify and replace specific HTML tags with custom Vue components.

```vue
<VkMarkdown :source="markdownText" :tags="['table']">
  <!-- Rendering template -->
</VkMarkdown>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.