2026/09/12 23:42:34

Markdown 编辑器#

一款纯前端 Markdown 编辑器，采用石墨深色单主题，支持实时预览和多种扩展功能。无后端，无外部网络请求，在浏览器中打开即可使用。项目链接：https://md.sylv.top

功能特性#

核心功能#

实时预览 - 编辑时即时渲染 Markdown 内容
左右分栏布局 - 左侧编辑，右侧预览，清晰直观
响应式设计 - 支持桌面端和移动端，小屏幕自动切换为上下布局
文件导入 - 支持导入 .md 和 .txt 文件
文件导出 - 支持导出为 .md 和 .html 格式
快捷键支持 - Ctrl+S 保存、Ctrl+Z 撤销、Ctrl+Y 重做、Ctrl+B 加粗、Ctrl+I 斜体
历史记录 - 自动保存编辑历史（最多 50 步）

格式化工具栏#

提供丰富的 Markdown 格式化工具：

基础格式：粗体、斜体、删除线
标题：H1、H2、H3 标题
链接和图片：支持插入链接和图片
代码：行内代码和代码块
列表：无序列表和有序列表
其他：引用、水平线、表格

扩展功能#

Emoji 表情：内置 Emoji 选择器，附带搜索框（当前版本暂未按关键词过滤）
GitHub 风格提示框：支持 5 种提示框类型
折叠内容：使用 :::details 语法创建可折叠内容区块

快速开始#

使用方法#

可直接前往此处体验

直接用浏览器打开 index.html 文件（无需联网，无需构建）
在左侧编辑区输入 Markdown 内容
右侧实时预览渲染效果
点击工具栏按钮可快速插入 Markdown 语法

技术栈#

HTML5 + CSS3 + JavaScript，样式与逻辑内联在 index.html 中
marked v15.0.12 - 通过本地 marked.min.js 引入（约 39 KB，已从 CDN 改为本地 vendored，可离线使用）
无需后端，纯前端实现

语法指南#

基础语法#

功能	语法	示例
粗体	`文本`	文本
斜体	`文本`	文本
删除线	`~~文本~~`	文本
标题	`# 标题`	一级标题
链接	`[文本](url)`	链接
图片	`![说明](url)`	图片
行内代码	`代码`	`代码`
代码块	```	代码块
引用	`> 文本`	块引用
无序列表	`- 项目`	列表项
有序列表	`1. 项目`	列表项
水平线	`---`	分隔线
表格	`\| 列1 \| 列2 \|`	表格

提示框#

支持 GitHub 风格的 alert 语法：

1
> [!NOTE]
2
> 这是一条提示信息
3
> 可以包含多行内容
4

5
> [!TIP]
6
> 这是一条建议提示
7

8
> [!IMPORTANT]
9
> 这是重要信息
10

11
> [!WARNING]
12
> 这是警告信息
13

14
> [!CAUTION]
15
> 这是注意事项

折叠内容#

1
:::details[可点击的标题]
2
这是折叠的内容，点击标题可以展开/收起
3
:::

折叠块需要首尾两行 ::: 闭合，只写开头一行无法正常收起。

项目结构#

1
md-editor/
2
├── index.html          # 主页面（内联 HTML、CSS、JS）
3
├── marked.min.js       # 本地解析器（marked v15.0.12）
4
├── DESIGN_SPEC.md      # 设计规范（v1.1，以此为准）
5
├── README.md           # 项目说明文档
6
└── .gitignore          # Git 忽略配置

主题设计#

采用石墨深色单主题（见 DESIGN_SPEC.md v1.1，不设浅色切换）：

主背景：#17181A
强调色：#8CA6C4（雾蓝）
旧版 Catppuccin 配色（#1e1e2e / #cba6f7 等）已不再使用

快捷键列表#

快捷键	功能
`Ctrl + S`	保存为 `.md` 文件
`Ctrl + Z`	撤销
`Ctrl + Y`	重做
`Ctrl + Shift + Z`	重做
`Ctrl + B`	插入粗体
`Ctrl + I`	插入斜体

浏览器支持#

推荐使用现代浏览器：

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

开发说明#

本项目为纯前端实现，无需构建工具，直接编辑 index.html 即可进行修改。

主要依赖：

marked v15.0.12 - 本地 marked.min.js 引入，不经过 CDN

版权信息#

Markdown 编辑器

https://blog.sylv.top/posts/20260503-md-editor/

作者

Sylvy

创建于

2026/05/03 22:21:00

许可协议

CC BY-NC-SA 4.0

修改历史

最后一次修改于 2026/09/12 23:42:34

2 次修改

更新 6 篇博文内容与 frontmatter 字段格式

2026/09/12 23:42:34

zzrliu8421

+20 / −18 行

index.md

index.md 38 处变更

删除

  - 一款功能丰富、美观实用的纯前端 Markdown 编辑器，采用深色主题设计，支持实时预览和多种扩展功能。 
  - - **Emoji 表情**：内置丰富的 Emoji 选择器，支持搜索功能 
  - > 可直接前往[此处](https://mde.ylv.top/)体验 
  - 1. 直接用浏览器打开 `index.html` 文件 
  - - HTML5 + CSS3 + JavaScript 
  - - [marked.js](https://marked.js.org/) - Markdown 解析器 
  - - 无需任何后端，纯前端实现 
  - - 零依赖，开箱即用 
  - ├── index.html          # 主页面（包含 HTML、CSS、JS） 
  - └──README.md           # 项目说明文档 
  - 采用优雅的深色主题配色： 
  - - 主背景：#1e1e2e（深紫灰色） 
  - - 编辑器背景：#181825 
  - - 强调色：#cba6f7（柔和紫色） 
  - - 次要强调色：#89b4fa（蓝色） 
  - - 文本主色：#cdd6f4 
  - - 文本次色：#a6adc8 
  - - marked.js - 通过 CDN 引入 

新增

  + 一款纯前端 Markdown 编辑器，采用石墨深色单主题，支持实时预览和多种扩展功能。无后端，无外部网络请求，在浏览器中打开即可使用。 
  + - **Emoji 表情**：内置 Emoji 选择器，附带搜索框（当前版本暂未按关键词过滤） 
  + > 可直接前往[此处](https://md.sylv.top/)体验 
  + 1. 直接用浏览器打开 `index.html` 文件（无需联网，无需构建） 
  + - HTML5 + CSS3 + JavaScript，样式与逻辑内联在 `index.html` 中 
  + - [marked v15.0.12](https://marked.js.org/) - 通过本地 `marked.min.js` 引入（约 39 KB，已从 CDN 改为本地 vendored，可离线使用） 
  + - 无需后端，纯前端实现 
  + ::: 
  + > 折叠块需要首尾两行 `:::` 闭合，只写开头一行无法正常收起。 
  + ├── index.html          # 主页面（内联 HTML、CSS、JS） 
  + ├── marked.min.js       # 本地解析器（marked v15.0.12） 
  + ├── DESIGN_SPEC.md      # 设计规范（v1.1，以此为准） 
  + ├── README.md           # 项目说明文档 
  + └── .gitignore          # Git 忽略配置 
  + 采用石墨深色单主题（见 `DESIGN_SPEC.md` v1.1，不设浅色切换）： 
  + - 主背景：#17181A 
  + - 强调色：#8CA6C4（雾蓝） 
  + - 旧版 Catppuccin 配色（#1e1e2e / #cba6f7 等）已不再使用 
  + - marked v15.0.12 - 本地 `marked.min.js` 引入，不经过 CDN 

初始创建功能

2026/05/03 22:21:00