字节青训营寒假「前端」项目——Mini Markdown Editor

项目介绍

Mini Markdown Editor 是 2025年寒假字节青训营「前端」的一个开源项目。此项目旨在提供一个简单、易用且高性能的 Markdown 编辑体验。这个项目的核心目标是通过精简和优化，让开发者能够更专注于 Markdown 内容的创作，同时保证其高效的解析与渲染能力。

项目采用 pnpm + monorepo 进行管理，确保了多个子项目的模块化管理以及高效的构建流程。项目包含两个核心子项目：

• @mini-markdown-rc/ast-parser：核心库。该库负责将 Markdown 文本解析为抽象语法树（AST），并根据需要转换为 HTML 或其他格式。
• @mini-markdown-rc/editor：基于 React 实现的 Markdown 编辑器，集成了语法高亮、实时预览等功能，提供了流畅的编辑体验。

项目相关链接（觉得项目不错的，可以给我们点个 star，谢谢大家～🥰）

gtihub: github.com/xiaotianna/…

gitee: gitee.com/lin-yaozhen…

文档地址: xiaotianna.github.io/mini-markdo…

功能亮点

• 简洁易用：用户可以快速上手，编辑界面直观清晰。
• 高性能：采用高效的 AST 解析和渲染机制，即使处理十万+的内容依然保持流畅。
• 灵活定制：提供丰富的 API，用户可以根据需求自定义工具栏、主题以及编辑器行为。
• 兼容性强：支持常见的 Markdown 语法，并能够生成标准的 HTML 代码，保证兼容性。

AST解析包-使用

安装

npm install @mini-markdown-rc/ast-parser

使用

• parseMarkdown: 用于解析 Markdown 文本，返回一个 AST 对象。
• transformHtml: 用于将 AST 对象转换为 html 字符串。

import { parseMarkdown, transformHtml } from "@mini-markdown-rc/ast-parser";
const ast = parseMarkdown("# Hello World");
const html = transformHtml(ast);

// 输出的内容：<h1 class="mini-md-h1" data-line="1">Hello World</h1> 
console.log(html);

Markdown编辑器-使用

安装

npm install @mini-markdown-rc/editor

使用

import { Editor } from "@mini-markdown-rc/editor";

export default function App() {
    return <Editor />;
}

编辑器效果

编辑器支持主题切换、本地存储、自定义工具栏等多种api，功能强大，具体使用参考API文档（xiaotianna.github.io/mini-markdo…）