Markdown 编辑器#

核心功能#

• 实时预览 - 编辑时即时渲染 Markdown 内容
• 左右分栏布局 - 左侧编辑，右侧预览，清晰直观
• 响应式设计 - 支持桌面端和移动端，小屏幕自动切换为上下布局
• 文件导入 - 支持导入 .md 和 .txt 文件
• 文件导出 - 支持导出为 .md 和 .html 格式
• 快捷键支持 - Ctrl+S 保存、Ctrl+Z 撤销、Ctrl+Y 重做、Ctrl+B 加粗、Ctrl+I 斜体
• 历史记录 - 自动保存编辑历史（最多 50 步）

格式化工具栏#

提供丰富的 Markdown 格式化工具：

• 基础格式：粗体、斜体、删除线
• 标题：H1、H2、H3 标题
• 链接和图片：支持插入链接和图片
• 代码：行内代码和代码块
• 列表：无序列表和有序列表
• 其他：引用、水平线、表格

扩展功能#

• Emoji 表情：内置丰富的 Emoji 选择器，支持搜索功能
• GitHub 风格提示框：支持 5 种提示框类型
• 折叠内容：使用 :::details 语法创建可折叠内容区块

使用方法#

可直接前往此处体验

1. 直接用浏览器打开 index.html 文件
2. 在左侧编辑区输入 Markdown 内容
3. 右侧实时预览渲染效果
4. 点击工具栏按钮可快速插入 Markdown 语法

技术栈#

• HTML5 + CSS3 + JavaScript
• marked.js - Markdown 解析器
• 无需任何后端，纯前端实现
• 零依赖，开箱即用

基础语法#

提示框#

支持 GitHub 风格的 alert 语法：

1
> [!NOTE]
2
> 这是一条提示信息
3
> 可以包含多行内容
4

5
> [!TIP]
6
> 这是一条建议提示
7

8
> [!IMPORTANT]
9
> 这是重要信息
10

11
> [!WARNING]
12
> 这是警告信息
13

14
> [!CAUTION]
15
> 这是注意事项

折叠内容#

1
:::details[可点击的标题]
2
这是折叠的内容，点击标题可以展开/收起

项目结构#

1
md-editor/
2
├── index.html          # 主页面（包含 HTML、CSS、JS）
3
└──README.md           # 项目说明文档