Markdown Editor - 离线文本编辑器

一个功能强大、设计精美的离线Markdown编辑器，支持实时预览和H5导出功能。

功能特色

📝 核心编辑功能

• 实时预览: 编辑时即时显示Markdown渲染效果
• 语法高亮: 完整的Markdown语法高亮支持
• 代码高亮: 支持多种编程语言的代码块高亮
• 自动保存: 每3秒自动保存到本地存储

🎨 编辑工具栏

• 格式快捷按钮: 标题、粗体、斜体、链接、图片等
• 列表支持: 有序列表和无序列表
• 代码块: 一键插入代码块
• 引用: 快速添加引用文本

💾 文件操作

• 新建文档: 创建新的Markdown文档
• 打开文件: 支持选择.md、.markdown、.txt文件
• 拖拽支持: 拖拽文件到编辑器自动打开
• 保存文件: 保存为.md源文件到本地

🌐 H5导出功能

• 一键导出: 将Markdown文档导出为完整的HTML5页面
• 离线可用: 导出的H5页面包含所有样式，可离线查看
• 样式保留: 完整的Markdown样式和代码高亮
• 响应式设计: 适配各种屏幕尺寸

🎯 用户体验

• 主题切换: 支持亮色/暗色主题
• 全屏模式: 专注写作模式
• 字数统计: 实时显示字数、字符数、段落数
• 键盘快捷键: 常用操作的快捷键支持
• 移动适配: 完美支持手机和平板设备

键盘快捷键

快捷键	功能
Ctrl+S	保存文件
Ctrl+O	打开文件
Ctrl+N	新建文档
Ctrl+B	粗体格式
Ctrl+I	斜体格式
Ctrl+K	插入链接

使用方法

1. 基本编辑

1. 在左侧编辑器中输入Markdown语法的内容
2. 右侧预览区会实时显示渲染效果
3. 使用工具栏按钮快速插入Markdown格式

2. 文件操作

• 新建: 点击"新建"按钮或按 Ctrl+N
• 打开: 点击"打开"按钮选择文件，或拖拽文件到编辑器
• 保存: 点击"保存"按钮或按 Ctrl+S
• 导出H5: 点击"导出H5"按钮生成HTML文件

3. 主题切换

• 点击主题切换按钮在亮色/暗色主题间切换
• 主题设置会自动保存

4. 全屏模式

• 点击右下角的全屏按钮进入专注写作模式
• 按 Esc 键退出全屏

Markdown语法支持

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本格式

**粗体文本**
*斜体文本*
~~删除线文本~~

列表

- 无序列表项
- 另一个列表项

1. 有序列表项
2. 第二个列表项

链接和图片

[链接文本](https://example.com)
![图片描述](image-url)

代码

`行内代码`

```javascript
// 代码块
function hello() {
    console.log('Hello, World!');
}

### 引用
```markdown
> 引用文本
> 可以有多行

表格

| 表头1 | 表头2 |
|-------|-------|
| 内容1 | 内容2 |
| 内容3 | 内容4 |

分隔线

---

技术特性

• 纯前端应用: 无需服务器，完全在浏览器中运行
• 离线可用: 支持离线编辑和保存
• 响应式设计: 适配桌面、平板、手机等各种设备
• 性能优化: 快速加载，流畅编辑体验
• 数据安全: 所有数据保存在本地，不会上传到服务器

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

开发技术栈

• CodeMirror 6: 专业代码编辑器
• Marked.js: Markdown解析器
• Highlight.js: 代码语法高亮
• Anime.js: 动画效果
• Tailwind CSS: 样式框架

使用建议

1. 定期保存: 虽然支持自动保存，但建议重要文档手动保存
2. 备份文档: 重要文档建议导出为.md文件备份
3. H5分享: 使用H5导出功能分享文档，接收方无需安装任何软件
4. 专注写作: 使用全屏模式减少干扰，提高写作效率

数据安全

• 所有编辑内容仅保存在本地浏览器存储中
• 不会将任何数据上传到服务器
• 支持导出为本地文件，完全控制您的数据

---

享受使用 Markdown Editor 带来的高效写作体验！