Markdown 在线编辑器

关于 Markdown 在线编辑器

基于 react-monaco-editor 的在线 Markdown 编辑预览工具：左侧 Monaco 编辑器具备标准语法高亮、快捷键与自动补全，右侧实时渲染预览；内容自动写入浏览器 localStorage，每 30 秒生成一次历史快照（最多 100 份），支持任意版本回溯。提供多种预览主题、左右栏宽度自由拖拽、整体沉浸式全屏（隐藏站点 Header/Footer）、预览区独立全屏（方便调用浏览器打印），以及清空、复制源码、导出 .md 等常用操作。所有数据仅保留在本机浏览器，安全可靠。

使用步骤

1. 在左侧编辑器中输入或粘贴 Markdown 文本，右侧会实时渲染预览。
2. 拖拽中间分隔条可自由调整编辑区与预览区宽度比。
3. 通过右上「主题」下拉切换文档 / 公文 / 笔记 / 暗黑 等预览样式。
4. 点击「全屏编辑」隐藏站点 Header/Footer，进入沉浸式写作模式；ESC 或再次点击退出。
5. 点击「预览全屏」将右侧渲染结果独占全屏展示，可直接使用浏览器 Ctrl/⌘+P 打印。
6. 点击「历史」打开版本列表，每 30 秒自动保存一份（最多 100 份），可一键恢复任意版本。
7. 点击工具栏「自定义 CSS」可注入只在预览区生效的样式，选择器以 `.md-preview-root` 为前缀即可（例如 `.md-preview-root h1 { color: red; }`）。
8. 工具栏还提供「复制源码」「导出 .md」「清空」等快捷操作。

常见使用场景

• 需要一个功能完善且界面友好的在线 Markdown 编辑器
• 公文 / 报告排版后打印输出
• 临时预览 markdown 文件，例如 README、设计文档、技术博客等
• 其中“紧凑简洁”主题是笔者用于用于排版个人简历所使用的主题