# markdown-editor
**Repository Path**: comm-tools/markdown-editor
## Basic Information
- **Project Name**: markdown-editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-08
- **Last Updated**: 2026-07-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Markdown Editor
A Markdown writing tool that works right out of the box in your browser.
**No installation. No account. No subscription. Your words belong to you.**
[](LICENSE)[](./markdown-editor.html)[](./i18n.js)
English | 简体中文
---
## 🌟 Why This Tool?
In the age of AI, Markdown should be simple enough.
As a Vibe Coding developer obsessed with Prompts, Agents, and Skills, I’ve used too many Markdown tools: some are too heavy, some charge subscriptions, and some sync your content to the cloud without asking. I just wanted to open a browser, type, see the layout, and take it away.
So I built this editor.
It is **just one HTML file**. Double-click to write. Everything is stored locally, and it works offline. It supports nearly all mainstream Agents — Codex, Claude Code, Openclaw, and more. Whether you’re designing an AGENTS.md or a Skill.md, you can do it here.
> If you also believe that in the age of AI, Markdown is the first language — welcome to use it, fork it, and star it.
---
## ✨ Features
### 🚀 Out-of-the-Box, Minimalist
- Single-file `markdown-editor.html`: double-click to run in the browser.
- All core styles, structure, and logic are inlined; works offline.
### 🖊️ Complete Markdown Experience
- **Drag-and-drop import**: drop files directly into the window.
- **Live preview**: write on the left, preview on the right in real time.
- **Multiple layouts**: edit + preview, edit only, or preview only.
- **Source mode**: edit raw Markdown directly on the right side.
- **Draggable split**: adjust the editor/preview ratio; position is remembered.
### 🛠️ Rich Editing Tools
| Feature | Description |
|---------|-------------|
| Headings | Quick H1-H6 insertion |
| Text styles | Bold, italic, underline, strikethrough, superscript, subscript |
| Lists | Unordered, ordered, and task lists |
| Quotes & code | Blockquotes, inline code, fenced code blocks |
| Links & images | URL insertion and local image Base64 embedding |
| Tables | Visual 8×8 table picker |
| Find & replace | Find next, replace, replace all |
### 🌐 Multi-Language Support (10 Languages)
Powered by `i18n.js`: **Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Spanish, French, German, Russian, Portuguese**.
Language preference is persisted to `localStorage`.
### 🎨 Dark / Light Theme
- One-click theme switching with automatic persistence.
- All colors use CSS variables, making customization easy.
### 💾 Local Auto-Save
- Auto-saves content to browser `localStorage` every 500ms.
- Content, filename, split ratio, collapsed states, theme, and language all survive page refresh.
### 📤 Multi-Format Export
| Format | Description |
|--------|-------------|
| `.md` | Raw Markdown file |
| `.html` | Standalone HTML file |
| `.doc` | Word document (opens directly in Office) |
| `.pdf` | Browser print-to-PDF |
| `.png` | Long-image export with 9:16, 4:5, 3:4, 1:1, 16:9 ratios for social sharing |
### ⌨️ Shortcuts
| Shortcut | Action |
|----------|--------|
| `Ctrl + S` | Save |
| `Ctrl + Z` | Undo |
| `Ctrl + Y` / `Ctrl + Shift + Z` | Redo |
| `Ctrl + B` | Bold |
| `Ctrl + I` | Italic |
| `Ctrl + U` | Underline |
| `Ctrl + K` | Insert link |
| `Ctrl + Shift + K` | Insert image |
| `Ctrl + F` | Find & replace |
| `Tab` | Insert 4-space indent |
---
## 🛠️ Technical Architecture
### Stack
- **Pure native frontend**: HTML5 + CSS3 + Vanilla JavaScript, no framework.
- **Markdown rendering**: `marked.js`
- **Math**: `KaTeX` (`$...$` inline, `$$...$$` block)
- **Diagrams**: `Mermaid 10` (mind maps and flowcharts)
- **Image export**: `dom-to-image-more`
- **Local proxy**: `Python 3` + `http.server` (optional, for webpage-to-Markdown)
### Core Design
```
┌─────────────────────────────────────────────────────────────┐
│ 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
```
---
## 📁 Project Structure
```
.
├── 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
```
---
## 🚀 Quick Start
### Option 1: Open Directly
```bash
# Clone the repo
git clone https://github.com/woyin2024/lengyi-markdown-editor.git
# Double-click to open
markdown-editor.html
```
### Option 2: Local Server (Recommended)
```bash
cd markdown-editor
# Python 3
python -m http.server 8080
# Or Node.js
npx serve .
# Open in browser
open http://localhost:8080/markdown-editor.html
```
### Option 3: Use the Local Proxy (Webpage to Markdown)
```bash
# Install requests (optional, recommended)
pip install requests
# Start the proxy
python web-to-md-proxy.py
# Default port 8765
# Check "Use local proxy" in the editor
```
---
## 🖼️ Screenshots
---
## 🤝 Contributing
This project started from my own need for a simple writing tool, but I believe it can be better.
New features, bug fixes, UI improvements, language additions, and documentation improvements are all welcome:
1. Fork the repository
2. Create your feature branch: `git checkout -b feature/AmazingFeature`
3. Commit your changes: `git commit -m 'Add some AmazingFeature'`
4. Push to the branch: `git push origin feature/AmazingFeature`
5. Open a Pull Request
---
## 📜 License
This project is licensed under the [MIT License](LICENSE).
You are free to use, modify, and distribute. For commercial use, please obtain authorization. I only hope that one quiet afternoon, when you write something you are truly satisfied with, you might remember where this little tool began.
---
## 👤 About the Author
**Leng Yi (冷逸)**, founder of Chinese top AI media "**沃垠AI**", a Vibe Coding developer who can’t really code but loves to dive deep into Prompts, Skills, and Agents.
- **Unified account across platforms**: 沃垠AI
- **Content matrix**: WeChat Official Account, Xiaohongshu, Zhihu, GitHub, Bilibili, X, etc.
Welcome to follow the WeChat Official Account "沃垠AI" for more AI insights:
---
### If this helps you, please give it a ⭐.
**Writing well is what matters most.**