Vue3 首选 Markdown 编辑器：md-editor-v3 预览区主题 作者：马育民 • 2026-05-29 16:40 • 阅读：10000 # 介绍 md-editor-v3 的预览区主题由 `previewTheme` 控制，内置 6 套主题，支持自定义。 # 内置预览主题 - **default**：默认，白底、常规间距。 - **github**：GitHub 风格，白底、代码块灰色。 - **vuepress**：VuePress 文档风，清爽、偏窄边距。**（推荐）** - **cyanosis**：青蓝色调，清新感。 - **mk-cute**：可爱风，柔和配色。 - **smart-blue**：商务蓝，正式感。 ### default 主题 [](https://www.malaoshi.top/upload/0/0/1GW3OqwhShCR.png) ### github 主题 [](https://www.malaoshi.top/upload/0/0/1GW3OqwsQ56V.png) ### vuepress 主题 [](https://www.malaoshi.top/upload/0/0/1GW3Oqx3zsuY.png) ### smart-blue 主题 [](https://www.malaoshi.top/upload/0/0/1GW3OqxH2Hzc.png) # 基础用法 ```vue <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> ``` # 动态切换主题 ```vue <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） ```vue <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> ``` 原文出处：http://malaoshi.top/show_1GW3Oqzn5Vvm.html