介绍

本文档主要用于描述 ShadcnMarkdown 组件的一些特性和用法。该组件基于成熟的 marked 库实现 Markdown 解析，使用 Tailwind CSS 样式。

用法

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="preview"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ShadcnMarkdown } from '@/ui/markdown'

const content = ref(`# 标题

这是一个 Markdown 编辑器。`)
</script>

编辑模式 (mode="edit")

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="edit"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref('# 在这里编辑内容')
</script>

分屏模式 (mode="split")

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="split"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref(`# 分屏模式

左侧编辑，右侧实时预览。`)
</script>

液态玻璃效果 (Glass)

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="split" glass/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref(`# 液态玻璃效果

支持液态玻璃效果的 Markdown 编辑器。`)
</script>

自定义高度 (height)

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="split" height="300px"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref('# 自定义高度')
</script>

占位符 (placeholder)

查看代码

<template>
    <ShadcnMarkdown v-model="content" mode="edit" placeholder="请输入您的内容..."/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const content = ref('')
</script>

Markdown 编辑器 属性

Markdown 编辑器 事件

功能特性

• ✅ 基于成熟的 marked 库解析 Markdown
• ✅ 使用 Tailwind CSS Typography 样式
• ✅ 支持 GFM（GitHub Flavored Markdown）
• ✅ 三种显示模式：预览、编辑、分屏
• ✅ 支持暗黑/浅色主题
• ✅ 支持液态玻璃效果
• ✅ 实时预览
• ✅ 自定义高度
• ✅ 自定义占位符