woyin2024/lengyi-markdown-editor

## 🌟 为什么选择这款工具？ 在 AI 时代，Markdown 理应足够简单。 作为一名沉迷于 Prompts、Agents 和 Skills 的 Vibe Coding 开发者，我用过太多的 Markdown 工具：有些过于臃肿，有些需要付费订阅，还有些会在未经允许的情况下将你的内容同步到云端。我只想要打开浏览器，敲下文字，看到排版，然后把它带走。 所以我开发了这款编辑器。 它**仅仅是一个 HTML 文件**。双击即可开始写作。所有数据都存储在本地，并且完全支持离线工作。它几乎支持所有主流的 Agents —— Codex、Claude Code、Openclaw 等等。无论你是在编写 AGENTS.md 还是 Skill.md，都可以在这里轻松完成。 ## ✨ 功能特性 ### 🚀 开箱即用，极简主义 - 单文件 `markdown-editor.html`：双击即可在浏览器中运行。 - 所有核心样式、结构和逻辑均内嵌其中；支持离线使用。 ### 🖊️ 完整的 Markdown 体验 - **拖拽导入**：直接将文件拖入窗口即可导入。 - **实时预览**：左侧编写，右侧实时预览。 - **多种布局**：编辑 + 预览、仅编辑或仅预览。 - **源码模式**：直接在右侧编辑原始 Markdown。 - **可拖动分割条**：自由调整编辑器/预览区的比例；系统会记住你的位置偏好。 ### 🛠️ 丰富的编辑工具 | 功能 | 描述 | |---------|-------------| | 标题 | 快速插入 H1-H6 标题 | | 文本样式 | 粗体、斜体、下划线、删除线、上标、下标 | | 列表 | 无序列表、有序列表和任务列表 | | 引用与代码 | 引用块、行内代码、围栏代码块 | | 链接与图片 | 插入 URL 链接以及本地图片的 Base64 内嵌 | | 表格 | 可视化的 8×8 表格选择器 | | 查找与替换 | 查找下一个、替换、全部替换 | ### 🌐 多语言支持（10 种语言） 由 `i18n.js` 驱动：**简体中文、繁体中文、英语、日语、韩语、西班牙语、法语、德语、俄语、葡萄牙语**。 语言偏好会被持久化保存到 `localStorage` 中。 ### 🎨 深色 / 浅色主题 - 一键切换主题，并自动持久化保存。 - 所有颜色均采用 CSS 变量，方便进行自定义。 ### 💾 本地自动保存 - 每 500ms 自动将内容保存到浏览器的 `localStorage`。 - 内容、文件名、分割比例、折叠状态、主题和语言设置均能在页面刷新后保留。 ### 📤 多格式导出 | 格式 | 描述 | |--------|-------------| | `.md` | 原始 Markdown 文件 | | `.html` | 独立的 HTML 文件 | | `.doc` | Word 文档（可直接在 Office 中打开） | | `.pdf` | 通过浏览器打印为 PDF | | `.png` | 支持长图导出，提供 9:16、4:5、3:4、1:1、16:9 比例，方便社交分享 | ### ⌨️ 快捷键 | 快捷键 | 操作 | |----------|--------| | `Ctrl + S` | 保存 | | `Ctrl + Z` | 撤销 | | `Ctrl + Y` / `Ctrl + Shift + Z` | 重做 | | `Ctrl + B` | 粗体 | | `Ctrl + I` | 斜体 | | `Ctrl + U` | 下划线 | | `Ctrl + K` | 插入链接 | | `Ctrl + Shift + K` | 插入图片 | | `Ctrl + F` | 查找与替换 | | `Tab` | 插入 4 个空格的缩进 | ## 🛠️ 技术架构 ### 技术栈 - **纯原生前端**：HTML5 + CSS3 + Vanilla JavaScript，无任何框架。 - **Markdown 渲染**：`marked.js` - **数学公式**：`KaTeX`（`$...$` 行内公式，`$$...$$` 块级公式） - **图表**：`Mermaid 10`（思维导图和流程图） - **图片导出**：`dom-to-image-more` - **本地代理**：`Python 3` + `http.server`（可选，用于网页转 Markdown） ### 核心设计 ``` ┌─────────────────────────────────────────────────────────────┐ │ markdown-editor.html │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Editor │ sync │ Preview │ │ │ │ (textarea) │ ──────▶ │ (marked.js) │ │ │ └──────────────┘ └──────────────┘ │ │ │ │ │ │ ▼ ▼ │ │ localStorage KaTeX / Mermaid │ │ │ │ │ │ ▼ ▼ │ │ auto-save / state restore formula / diagram render │ └─────────────────────────────────────────────────────────────┘ │ ▼ web-to-md-proxy.py (optional) web fetching + anti-bot bypass ``` ## 📁 项目结构 ``` . ├── markdown-editor.html # Main editor (single-file app) ├── i18n.js # i18n dictionary (10 languages) ├── web-to-md-proxy.py # Optional local proxy script ├── public/ # Static assets │ ├── 关于作者.md │ ├── 产品海报.png │ └── 产品界面.png └── README.md # This file ``` ## 🚀 快速开始 ### 方式一：直接打开 ``` # Clone the repo git clone https://github.com/woyin2024/lengyi-markdown-editor.git # 双击打开 markdown-editor.html ``` ### 方式二：启动本地服务器（推荐） ``` cd markdown-editor # Python 3 python -m http.server 8080 # 或 Node.js npx serve . # 在浏览器中打开 open http://localhost:8080/markdown-editor.html ``` ### 方式三：使用本地代理（网页转 Markdown） ``` # 安装 requests（可选，推荐） pip install requests # 启动 proxy python web-to-md-proxy.py # 默认端口 8765 # 在 editor 中勾选“Use local proxy” ``` ## 🖼️ 项目截图

## 📜 许可证 本项目基于 [MIT License](LICENSE) 开源。 你可以自由使用、修改和传播。如需用于商业用途，请获取授权。我只希望，在某个宁静的午后，当你写下自己真正满意的文字时，能够想起这款小工具最初的起点。 ## 👤 关于作者 **冷逸**，中国头部 AI 媒体“**沃垠AI**”创始人，一名其实不太懂代码，却热衷于深入探索 Prompts、Skills 和 Agents 的 Vibe Coding 开发者。 - **全平台统一账号**：沃垠AI - **内容矩阵**：微信公众号、小红书、知乎、GitHub、Bilibili、X 等。

标签：Markdown, 前端工具, 后端开发, 文本编辑器, 离线工具, 纯前端, 逆向工具