Skip to content

LiWeny16/MarkdownOnline

Repository files navigation

🚀 Markdown Online Editor

专业级在线 Markdown 编辑器 | 基于 VSCode 编辑器内核

Version License React TypeScript Monaco Editor

🌐 在线体验 | 📖 English | 🐛 问题反馈


✨ 项目简介

Markdown Online Editor 是一款功能强大的在线 Markdown 编辑器,集成了 VSCode Monaco 编辑器内核,提供专业级的编辑体验。无需安装,打开浏览器即可享受媲美桌面应用的流畅体验。

🎯 核心特性

  • 🎨 Monaco 编辑器 - 基于 VSCode 的强大编辑器内核,完整的语法高亮和智能提示
  • 📁 文件管理系统 - 支持文件夹、多文件管理,本地存储持久化
  • 🎭 实时预览 - 双栏同步滚动,所见即所得
  • 🧮 LaTeX 公式 - 完整的数学公式渲染支持(KaTeX)
  • 📊 Mermaid 图表 - 流程图、时序图、甘特图等多种图表
  • 🎨 代码高亮 - 支持 100+ 编程语言语法高亮
  • 🖼️ 图片管理 - 本地图片上传、管理和预览
  • 🌓 主题切换 - 支持明暗主题,保护您的眼睛
  • 💾 导出功能 - 支持 PDF、HTML 等多种格式导出
  • AI 辅助 - 集成 AI 助手,智能写作辅助
  • 📱 响应式设计 - 完美适配移动端和桌面端

🚀 快速开始

📦 安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install

💻 本地开发

# 启动开发服务器
npm run dev

# 访问 http://localhost:5173

🏗️ 构建生产版本

# 构建项目
npm run build

# 预览构建结果
npm run preview

🌐 部署

Vercel 部署(推荐)

  1. Fork 本项目到您的 GitHub 账号
  2. Vercel 导入项目
  3. 一键部署,自动配置

📚 技术栈

技术 说明
React 18 前端框架,提供现代化的组件开发体验
TypeScript 类型安全的 JavaScript 超集
Vite 下一代前端构建工具,极速开发体验
Monaco Editor VSCode 编辑器内核,专业级代码编辑
MobX 简单、可扩展的状态管理
Material-UI React UI 组件库
markdown-it 强大的 Markdown 解析器
KaTeX 快速的数学公式渲染引擎
Mermaid 文本驱动的图表生成工具
Vite PWA 渐进式 Web 应用支持

📖 使用指南

LaTeX 数学公式

使用 $$ 包裹块级公式,$ 包裹行内公式:

块级公式:
$$
E = mc^2
$$

行内公式:质能方程 $E = mc^2$ 很重要

Mermaid 流程图

使用代码块并指定 mermaid 语言:

```mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|条件1| C[执行方案A]
    B -->|条件2| D[执行方案B]
    C --> E[结束]
    D --> E
```

Emoji 表情

直接使用 emoji 代码:

:heart: :smile: :rocket: :star:

代码高亮

支持 100+ 编程语言:

```python
def hello_world():
    print("Hello, Markdown!")
```

```javascript
const greeting = () => {
    console.log("Hello, Markdown!");
};
```

表格增强

支持多行表格(multimd-table):

|             |          Grouping           ||
| First Header  | Second Header | Third Header |
| ------------- | :-----------: | -----------: |
| Content       |          *Long Cell*        ||
| Content       |   **Cell**    |         Cell |

任务列表

- [x] 已完成的任务
- [ ] 待完成的任务
- [ ] 另一个待办事项

更多语法请参考 Markdown 完整指南

🗺️ 开发路线图

✅ 已完成

  • ✅ VSCode Monaco 编辑器集成
  • ✅ 完整的文件管理系统(支持文件夹)
  • ✅ LaTeX 数学公式渲染
  • ✅ Mermaid 图表支持
  • ✅ AI 写作助手集成
  • ✅ PDF/HTML 导出功能
  • ✅ 图片管理器
  • ✅ 目录(TOC)自动生成
  • ✅ 多主题支持
  • ✅ PWA 支持

🚧 开发中

  • 🚧 WebAssembly 脚本运行环境
  • 🚧 Jupyter 风格的代码单元格执行

📋 计划中

  • 📋 实时协同编辑
  • 📋 云端同步
  • 📋 更多 AI 功能增强
  • 📋 插件系统

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议!

  1. Fork 本项目
  2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交您的更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开一个 Pull Request

📄 开源协议

本项目采用 MIT 协议开源

Copyright (c) 2022-present Bigonion

FOSSA Status

🔗 相关链接

👨‍💻 关于作者

Bigonion

🙏 致谢

感谢所有为本项目做出贡献的开发者:

Image

感谢以下开源项目的支持:

完整的依赖列表请查看 依赖报告


如果这个项目对您有帮助,请给它一个 ⭐️

Made with ❤️ by Bigonion

About

A markdown online editor with more powerful functions.

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors