how to realtime preview markdown content?

[xiangnanscu]

I want to write a page for creating blog. Left section is a textarea I input markdown, right section is the preview. I've tried many packages but none meets my need.

[xiangnanscu]

example, in an page component, then MarkdownRender would show the markdown preview which will be the same with vitepress build output:

<script setup>
const markdownContent = ref("");
</script>

<template>
  <a-row>
    <a-col>
      <textarea v-model="markdownContent"></textarea>
    </a-col>
    <a-col>
      <MarkdownRender :content="markdownContent"></MarkdownRender>
    </a-col>
  </a-row>
</template>

[brc-dd]

VitePress doesn't have a client-side renderer. You can either create one yourself using client-side build of markdown-it with limited features or embed something like StackBlitz's WebContainers.