介绍
md-editor-v3 的预览区主题由 previewTheme 控制，内置 6 套主题，支持自定义。
内置预览主题
- default：默认，白底、常规间距。
- github：GitHub 风格，白底、代码块灰色。
- vuepress：VuePress 文档风，清爽、偏窄边距。（推荐）
- cyanosis：青蓝色调，清新感。
- mk-cute：可爱风，柔和配色。
- smart-blue：商务蓝，正式感。
default 主题
github 主题
vuepress 主题
smart-blue 主题
基础用法
<template>
<MdEditor
v-model="content"
previewTheme="github" <!-- 预览主题 -->
codeTheme="github" <!-- 代码高亮主题（可选） -->
/>
</template>
<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const content = ref('# Hello md-editor-v3');
</script>
动态切换主题
<template>
<select v-model="theme">
<option value="default">default</option>
<option value="github">github</option>
<option value="vuepress">vuepress</option>
<option value="cyanosis">cyanosis</option>
<option value="mk-cute">mk-cute</option>
<option value="smart-blue">smart-blue</option>
</select>
<MdEditor v-model="content" :previewTheme="theme" />
</template>
<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const content = ref('');
const theme = ref('github');
</script>
仅预览模式（MdPreview）
<template>
<MdPreview
:modelValue="content"
previewTheme="vuepress" <!-- 预览主题 -->
codeTheme="github" <!-- 代码高亮主题（可选） -->
/>
</template>
<script setup>
import { ref } from 'vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const content = ref('# 仅预览模式');
</script>