md2html

KO | EN

gitlite — search

#javascript #typescript #machine-learning #rust #deep-learning #linux #nodejs #macos #windows #cli #awesome-list #vue #security #openai

(★ 14)

md格式转html

md2html 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 📝 MD2HTML — Markdown 在线转换工具

> 一款零依赖的 Markdown → HTML / Word 在线渲染工具，支持 Mermaid 图表、GitHub Alerts、自动目录生成等完整功能。

---

## ✨ 功能特性

| 功能 | 说明 |
|------|------|
| ✏️ **粘贴输入** | 直接粘贴 Markdown 文本到编辑区 |
| 📁 **文件上传** | 拖拽 `.md` / `.markdown` / `.txt` 文件，支持全局拖拽 |
| ⚡ **一键转换** | 将 Markdown 渲染为带完整样式的 HTML 文档 |
| 👁 **实时预览** | iframe 内嵌预览转换结果，含 Mermaid 图表实时渲染 |
| 📋 **源码查看** | 一键查看生成的 HTML 源码 |
| ⬇️ **下载 HTML** | 导出自包含的 `.html` 文件（暗色主题） |
| 📄 **导出 Word** | 导出 `.doc` 文件，白色背景专业排版，Word/WPS 直接打开 |
| ⌨️ **快捷键** | `Ctrl+Enter` 转换 · `Ctrl+S` 下载 HTML · `Ctrl+D` 导出 Word |
| 📊 **统计信息** | 实时显示行数、字符数、标题数、Mermaid 图表数 |

### 支持的 Markdown 语法

- **标题** — `h1` ~ `h6`，自动层级配色
- **表格** — 完整表格渲染，深色表头 + hover 高亮（HTML）/ 蓝色表头 + 斑马纹（Word）
- **代码块** — 语法高亮风格，等宽字体
- **行内代码** — 带背景色标记
- **列表** — 有序 / 无序列表
- **引用** — 带左边框的引用块
- **Mermaid 图表** — `flowchart` / `sequenceDiagram` / `mindmap` / `erDiagram` / `stateDiagram` 等
- **GitHub Alerts** — `[!NOTE]` / `[!TIP]` / `[!IMPORTANT]` / `[!WARNING]` / `[!CAUTION]`
- **图片** — 居中展示 + 标题
- **链接** — 带主题色跳转
- **粗体 / 斜体** — `**粗体**` / `*斜体*` / `***粗斜体***`
- **水平线** — `---` 或 `***`

---

## 🚀 快速开始

### 环境要求

- Node.js 16+（仅用于启动静态服务器）
- 现代浏览器（Chrome / Edge / Firefox / Safari）

### 安装与运行

```bash
# 进入项目目录
cd md2html

# 启动开发服务器
npm run dev

# 也可以直接启动
npx serve . -p 3001 -s
```

打开浏览器访问 **http://localhost:3001** 即可使用。

> 💡 **提示**：本项目为纯静态页面，也可以直接双击 `index.html` 打开使用（Mermaid 图表需联网加载 CDN）。

---

## 🗂 项目结构

```
md2html/
├── index.html          # 主页面 — 双面板布局
├── style.css           # 样式 — 暗色主题 + 响应式
├── converter.js        # HTML 转换引擎 — Markdown → HTML
├── word-exporter.js    # Word 导出引擎 — Markdown → .doc
├── app.js              # 交互逻辑 — Tab/拖拽/转换/下载
├── package.json        # 项目配置
└── README.md           # 项目说明
```

---

## 🎨 输出格式对比

### HTML 输出（暗色主题）

- 深蓝背景 + 渐变 Banner
- 蓝色 / 紫色 / 绿色标题层级配色
- Mermaid 图表使用 dark 主题渲染
- 自动生成带导航的 TOC 目录
- 打印时自动切换为白色背景
- 回到顶部浮动按钮

### Word 输出（浅色主题）

- A4 纸张、标准页边距（上2.5cm / 其余2cm）
- 蓝色系专业标题，6级分色
- 表格：蓝色表头 + 交替斑马纹背景
- 代码块：深色背景等宽字体
- GitHub Alerts 以彩色边框卡片呈现
- Mermaid 图表显示为占位提示（Word 不支持 SVG 渲染）

---

## ⌨️ 快捷键

| 快捷键 | 功能 |
|--------|------|
| `Ctrl + Enter` | 开始转换 |
| `Ctrl + S` | 下载 HTML 文件 |
| `Ctrl + D` | 导出 Word 文件 |

---

## 🛠 技术实现

- **零外部依赖** — 无需 npm install，纯原生 JavaScript
- **Markdown 解析** — 自研解析器，覆盖所有常用语法
- **Mermaid 渲染** — 通过 unpkg CDN 加载 `mermaid@10`
- **Word 导出** — 基于 Word XML namespace 的 HTML-to-DOC 方案
- **预览方案** — Blob URL + iframe，完整隔离 + 支持 CDN 加载

---

## 📄 命令行版本

项目根目录下还有独立的命令行转换工具：

```bash
# 转换单个文件
node md2html.js <input.md> [output.html]

# 示例
node md2html.js README.md
node md2html.js docs/spec.md output/spec.html
```

---

## 📝 License

MIT

md2html

md2html 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

md2html

md2html 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README