官网地址：https://bytemd.js.org/playground
GitHub地址：https://github.com/bytedance/bytemd

ByteMD 是字节跳动出品的富文本编辑器，功能强大，可以免费使用，而且支持很多掘金内置的主题，写作体验很棒。
ByteMD 编辑器使用 Svelte 框架开发，支持原生、Vue、React、Svelte 框架集成，几乎适用于所有前端开发人员。

有两个组件：Editor 和 Viewer。Editor 顾名思义就是 Markdown 编辑器；Viewer 通常用于显示渲染的 Markdown 结果，无需编辑。

安装：

npm install @bytemd/vue-next

# 安装辅助插件，例如gfm（表格支持）插件、highlight 代码高亮插件、GitHub风格的Markdown CSS框架
npm install @bytemd/plugin-gfm
npm install @bytemd/plugin-highlight
npm install github-markdown-css

封装组件
MdViewer.vue

<template><Viewer :value="value" :plugins="plugins" />
</template><script setup lang="ts">import { Viewer } from "@bytemd/vue-next";import gfm from "@bytemd/plugin-gfm";import highlight from "@bytemd/plugin-highlight";import "bytemd/dist/index.css";import "highlight.js/styles/default.css";import "github-markdown-css/github-markdown-light.css";// import "github-markdown-css/github-markdown-dark.css";const plugins = [gfm(), highlight()];interface Props {value : string;}const props = withDefaults(defineProps<Props>(), {value: () => {return "";},});
</script>

使用

import MdViewer from "./MdViewer.vue";

<md-viewer :value="mdContent" />

效果：