oa/documentation/markdown-preview/v-markdown-preview-base-documentation.md

state

state
markdown ## Hello Vuero This is a **Markdown** preview content.

VMarkdownPreview

Vuero ship <VMarkdownPreview /> component that converts Markdown source code to HTML and highlights code blocks using shiki.

This component uses unifiedjs, a powerful toolkit for processing and manipulating text and markdown files, to parse and transform the Markdown source code. unifiedjs has a number of benefits, including:

• Support for a wide range of plugins that enable additional functionality,
  such as syntax highlighting and code formatting.
• Extensibility, allowing developers to create custom plugins to meet their specific needs

shiki is a high-performance syntax highlighting library that is used to add syntax highlighting to code blocks in the generated HTML. Some benefits of using shiki include:

• Fast and lightweight, with a small bundle size
• Supports a wide range of programming languages
• Customizable, allowing developers to choose from a variety of color schemes and styles

<script setup lang="ts">
const markdown = ref('## Hello Vuero\n\nThis is a **Markdown** preview content.')
</script>

<template>
  <VFlex column-gap="1rem">
    <VFlexItem flex-grow="1">
      <VField>
        <VControl>
          <VTextarea v-model="markdown" autogrow />
        </VControl>
      </VField>
    </VFlexItem>

    <VFlexItem flex-grow="1">
      <VMarkdownPreview :source="markdown" />
    </VFlexItem>
  </VFlex>
</template>