MD Editor - Chrome 扩展

一个简洁实用的 Markdown 编辑器 Chrome 扩展，支持分屏编辑预览、Mermaid 图表、多主题切换、远程文档加载和本地文档管理。

安装

Chrome Web Store

手动安装（开发模式）

1. 下载 GitHub Release 页面的最新版本到本地并解压，链接：https://github.com/wood3n/md-editor-extension/releases
2. 打开 Chrome 扩展程序管理页面并启动右上角开发者模式
3. 点击 Chrome 扩展程序管理页面左上角【加载未打包的扩展程序】选择刚才解压的文件目录即可

功能特性

• Markdown + 预览分屏：左侧 Monaco Editor（支持语法高亮、自动补全、多光标），右侧 markdown-it + shiki 实时渲染
• 本地图片粘贴：直接粘贴 PNG、JPEG、GIF、WebP 图片；图片二进制保存在本地 IndexedDB，Markdown 使用短引用，离线刷新后仍可预览
• 统一主题系统：11 套预设主题（GitHub Light/Dark、One Dark Pro、Monokai、Dracula、Solarized、Catppuccin 等），一键切换编辑器、预览区和代码高亮
• Markdown 语法工具栏：标题、加粗、斜体、下划线、删除线、引用、任务列表、表格、图片、链接、代码块等快捷插入按钮
• 扩展语法：下标、上标、高亮、插入文本、表情符号、脚注、定义列表、Front Matter
• 提示框 (Admonitions)：:::note / :::tip / :::info / :::warning / :::danger 五种语法高亮提示框
• 代码高亮：基于 shiki，支持行号显示
• 远程 Markdown 加载：直接在浏览器中打开 .md 链接，扩展自动读取页面内容并加载到编辑器
• 智能缓存：双层缓存（内存 + chrome.storage.local）
• 本地文档管理：保存编辑的文档到本地，支持自定义标题，侧边栏管理文档列表
• Mermaid 图表：原生渲染 mermaid 代码块，支持流程图、时序图、甘特图等
• 导出：下载为 Markdown（.md）或 HTML
• 目录导航：自动从文档标题生成目录，悬浮在编辑器右上角
• 滚动跟随：编辑区和预览区双向滚动同步
• 快捷键：⌘S / Ctrl+S 快速保存

📝 扩展 Markdown 语法

除了标准 Markdown 语法外，编辑器支持以下扩展语法：

语法	写法	效果
下标	H~2~O	H₂O
上标	x^2^	x²
插入文本	++inserted++	inserted
高亮标记	==marked==	marked
表情符号	:smile: :rocket:	😄 🚀

脚注

这是一段带有脚注的文本[^1]。

[^1]: 这是脚注内容。

定义列表

术语
: 定义内容

Front Matter

在文档开头使用 --- 包裹 YAML 元数据：

---
title: 我的文档
author: oxygen
date: 2024-01-01
---

💡 提示框 (Admonitions)

使用 ::: 语法创建高亮提示框，支持 5 种类型：

:::note

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::warning

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

🎨 一键主题切换

内置 12 套精心设计的主题预设，点击右上角调色板按钮即可切换。每套主题会同步应用到顶部导航栏、编辑区、预览区、侧边栏和代码高亮，提供沉浸式写作体验。

主题	风格	预览	代码	编辑器
GitHub Light	浅色	GitHub 风格排版	GitHub Light	GitHub Light
GitHub Dark	深色	GitHub Dark 风格	GitHub Dark	GitHub Dark
One Dark	深色	Atom One Dark	One Dark Pro	One Dark
Tailwind	浅色	Tailwind 风格	GitHub Light	Light
Tailwind Dark	深色	Tailwind 暗色	Houston	GitHub Dark
Monokai	深色	One Dark	Monokai	Monokai
Dracula	深色	GitHub Dark	Dracula	Dracula
Nord	深色	One Dark	Nord	Nord
Solarized Light	浅色	GitHub Light	Solarized Light	Light
Solarized Dark	深色	GitHub Dark	Solarized Dark	GitHub Dark
VS Code Dark	深色	GitHub Dark	GitHub Dark	VS Code Dark
Sublime	深色	One Dark	GitHub Dark	Sublime

🌐 远程文档直接编辑

在浏览器中打开任意 .md、.markdown 等 Markdown 文件的链接，点击扩展图标即可一键加载到编辑器，无需手动复制粘贴。支持 GitHub、GitLab、Gitee 等代码托管平台上的原始 Markdown 文件，也支持任意返回纯文本 Markdown 的 URL。

• 自动识别 .md / .markdown / .mdown / .mkd / .mdx 等 Markdown 文件扩展名
• 智能缓存机制，重复打开同一文件无需重新请求
• 加载的文档可编辑后保存到本地，随时离线查看

使用方法

打开 markdown 文件

1. 在浏览器中打开任意 .md 链接（如 https://raw.githubusercontent.com/user/repo/main/README.md）
2. 点击浏览器工具栏中的 MD Editor 扩展图标
3. 扩展自动读取页面文本内容并加载到编辑器

编辑和保存

1. 在编辑器中对内容进行编辑
2. 点击 保存 按钮（或按 ⌘S / Ctrl+S）
3. 输入文档标题
4. 已保存的文档会出现在左侧侧边栏中，方便快速访问

本地图片粘贴

将本地图片复制后，在编辑器内直接粘贴即可。图片文件保存在浏览器本地的 IndexedDB，文档中仅保存 md-image:// 短引用，因此刷新或重新打开文档后仍可预览。

目前该短引用只能在本扩展内显示；下载 Markdown 后，如需在其他应用中使用图片，需要在后续版本通过图片包或内嵌图片导出。

侧边栏

• 点击左上角按钮切换侧边栏
• 点击任意文档加载到编辑器
• 鼠标悬停时显示删除按钮

导出

• 点击 下载 按钮下载 .md 文件
• 点击 ⋯ → 导出 HTML 导出为 HTML

主题切换

• 点击右上角 🎨 调色板按钮打开主题菜单
• 12 套预设主题，一键切换整体配色

开发

pnpm dev    # Rsbuild 开发服务器，支持 HMR
pnpm build  # Rsbuild 生产构建

技术栈

• 运行环境：Chrome 扩展（Manifest V3）
• 前端框架：React 18 + TypeScript
• 编辑器：Monaco Editor（@monaco-editor/react）
• Markdown 渲染：markdown-it + 12 个插件（shiki 代码高亮、sub/sup/ins/mark 扩展语法、脚注、定义列表、表情符号、任务列表、提示框容器等）
• 代码高亮：shiki（纯 JS 引擎，CSP 安全）
• UI 组件：shadcn/ui（基于 base-ui）
• 图表：Mermaid
• 构建工具：Rsbuild
• 样式：Tailwind CSS v4
• 图标：Lucide React

项目结构

src/
├── app.tsx                # 应用入口组件
├── main.tsx               # 渲染入口
├── types.ts               # 类型定义
├── constants/index.ts     # 常量配置
├── context/
│   ├── doc.ts             # 文档状态（zustand）
│   └── theme.tsx          # 主题上下文
├── hooks/
│   ├── use-shiki.ts       # shiki 高亮 hook
│   └── use-theme.ts       # 主题切换 hook
├── lib/
│   ├── doc-db.ts          # IndexedDB 文档持久化
│   └── utils.ts           # 工具函数
├── background/
│   └── service-worker.ts  # Service worker
├── components/
│   ├── ui/                # shadcn/ui 组件库
│   ├── doc-list-drawer/   # 文档列表抽屉
│   ├── header/            # 顶部工具栏
│   │   ├── index.tsx
│   │   ├── doc-save-dialog.tsx
│   │   ├── doc-rename-dialog.tsx
│   │   ├── md-export.tsx
│   │   └── theme-select.tsx
│   ├── md-editor/         # Monaco Editor 封装
│   │   ├── index.tsx
│   │   └── options.ts
│   ├── md-preview/        # markdown-it + shiki 渲染
│   │   ├── index.tsx
│   │   └── md.ts
│   └── md-toolbar/        # Markdown 语法工具栏
│       ├── index.tsx
│       ├── header-select.tsx
│       ├── toc.tsx
│       └── tool.ts
├── styles/
│   ├── markdown-body.css  # 预览区基础样式
│   └── md-*.css           # 12 套主题 CSS
└── package.d.ts

许可证

MIT