Markdown to PDF/PNG Converter

一个功能强大的Chrome浏览器插件，可以将Markdown文本转换为PDF或PNG格式，支持Mermaid图表、语法高亮和实时预览。

✨ 功能特性

🎯 核心功能

• Markdown解析: 支持完整的Markdown语法，包括标题、列表、表格、代码块等
• PDF转换: 将Markdown内容转换为高质量的PDF文档
• PNG转换: 将Markdown内容转换为PNG图片格式
• 实时预览: 实时显示Markdown渲染效果
• 双入口设计: 弹窗模式和独立页面模式

🎨 高级特性

• Mermaid图表支持: 自动渲染Mermaid流程图、时序图等
• 语法高亮: 支持多种编程语言的语法高亮
• 现代化UI: 采用渐变设计和响应式布局
• 内容同步: 弹窗和独立页面内容自动同步
• 本地存储: 自动保存输入内容，下次打开时恢复
• 中文支持: 完整的中文字体支持

📱 双入口设计

• 弹窗模式: 快速转换，适合简单操作
• 独立页面: 完整功能，左右分栏布局，适合复杂编辑

🚀 快速开始

安装方法

开发者模式安装

https://github.com/Oyawei/mkdn2pdf

1. 下载或克隆此项目到本地

2. 打开Chrome浏览器，进入扩展程序页面：

   • 在地址栏输入 chrome://extensions/
   • 或者点击菜单 → 更多工具 → 扩展程序

3. 开启"开发者模式"（右上角开关）

4. 点击"加载已解压的扩展程序"

5. 选择项目文件夹，插件将被安装

使用方法

弹窗模式（快速转换）

1. 打开插件: 点击Chrome工具栏中的插件图标
2. 输入内容: 在文本框中输入或粘贴Markdown内容
3. 选择选项: 启用Mermaid图表和语法高亮
4. 转换格式: 点击"Convert to PDF"或"Convert to PNG"
5. 打开独立页面: 点击"Open Full Page"获得更大操作空间

独立页面模式（完整功能）

1. 打开独立页面: 从弹窗点击"Open Full Page"或直接访问
2. 左右分栏布局: 左侧编辑，右侧实时预览
3. 实时预览: 输入时实时显示渲染效果
4. 完整功能: 更大的编辑区域和完整的预览功能

📝 支持的Markdown语法

基础语法

• 标题: # ## ### #### ##### ######
• 文本格式: 粗体 斜体 删除线
• 列表: - * 1. 2. 3.
• 链接:
• 图片:
• 代码: 行内代码 或 代码块
• 表格: | 列1 | 列2 |
• 引用: > 引用文本
• 分割线: —

高级功能

• Mermaid图表(暂未支持): mermaid 图表代码
• 语法高亮: javascript 代码
• 任务列表: - [x] 已完成 - [ ] 未完成

🎨 界面设计

弹窗界面

┌─────────────────────────────────┐
│ 📄 Markdown Converter          │
│ Convert your Markdown to PDF   │
├─────────────────────────────────┤
│ [输入区域]                      │
│ [转换选项]                      │
│ [Convert to PDF] [Convert PNG] │
│ ┌─────────────────────────────┐ │
│ │ 🖥️ Open Full Page          │ │
│ │ 在独立页面中进行转换操作      │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

独立页面布局

┌─────────────────────────────────────┐
│ ← 返回    📄 Markdown Converter    │
│ 在独立页面中转换你的Markdown文档    │
├─────────────────────────────────────┤
│ 左侧编辑区域    │ 右侧预览区域      │
│ ┌─────────────┐ │ ┌─────────────┐ │
│ │ ✏️ 编辑     │ │ │ 👁️ 预览     │ │
│ │ [文本框]     │ │ │ [渲染效果]   │ │
│ │ [转换按钮]   │ │ │ [实时更新]   │ │
│ └─────────────┘ │ └─────────────┘ │
└─────────────────────────────────────┘

📁 项目结构

mkdn2pdf/
├── manifest.json              # Chrome扩展配置
├── popup-simple.html         # 弹窗界面
├── converter.html            # 独立页面界面
├── scripts/
│   └── popup.js             # 核心逻辑文件
├── styles/
│   ├── popup.css            # 弹窗样式
│   ├── fontawesome.css      # 图标样式
│   └── force-width.css      # 宽度控制
├── libs/                    # 第三方库
│   ├── marked.min.js        # Markdown解析
│   ├── mermaid.min.js       # 图表渲染
│   ├── highlight.min.js     # 语法高亮
│   ├── jspdf.umd.min.js     # PDF生成
│   ├── html2canvas.min.js   # 图片转换
│   └── jspdf-font-chinese.js # 中文字体
├── icons/                   # 图标文件
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── example.md              # 示例文档
├── README.md              # 项目说明
└── 测试页面/               # 功能测试页面├── test-live-preview.html├── test-syntax-highlight.html├── test-converter-preview.html├── test-preview-fix.html├── test-pdf-fix.html└── test-preview-ui-update.html

🔧 技术架构

核心技术栈

• Markdown解析: marked.js
• 图表渲染: mermaid.js
• 语法高亮: highlight.js
• PDF生成: jsPDF
• 图片转换: html2canvas
• UI框架: 原生HTML/CSS/JavaScript

权限配置

{"permissions": ["activeTab",    // 访问当前标签页"storage",      // 数据存储"downloads",    // 文件下载"tabs"         // 新建标签页]
}

🐛 最近修复的问题

1. 实时预览功能修复

问题: Live Preview 渲染失败，出现JavaScript语法错误
解决方案:

• 修复了 jspdf-font-chinese.js 文件内容
• 优化了脚本加载顺序
• 增强了错误处理和日志记录

2. 语法高亮功能修复

问题: hljs.highlightAll is not a function 错误
解决方案:

• 在 highlight.min.js 中添加了缺失的 highlightAll 方法
• 增强了错误检查和处理
• 解决了浏览器缓存问题

3. 预览容器DOM查找修复

问题: Cannot read properties of null (reading 'style') 错误
解决方案:

• 修复了预览容器的DOM查找方式
• 使用 querySelector('.preview-container') 替代 getElementById
• 添加了元素存在性检查

4. PDF生成功能修复

问题: ReferenceError: imgData is not defined 错误
解决方案:

• 在 createPdf 方法中正确定义 imgData 变量
• 使用 canvas.toDataURL('image/png') 生成图片数据
• 保持多页处理逻辑的完整性

5. 预览UI优化

改进内容:

• 移除了不必要的Rendered/HTML切换按钮
• 增加了预览文本的行间距（2.0倍）
• 预览标题居中显示
• 简化了预览区域布局

📱 响应式设计

桌面端 (1200px+)

• 左右分栏布局
• 完整功能展示
• 最佳用户体验

平板端 (768px-1199px)

• 自适应宽度
• 保持布局结构
• 良好操作体验

移动端 (<768px)

• 上下布局
• 按钮垂直排列
• 触摸友好设计

🎯 使用场景

弹窗模式适合

• ✅ 快速转换简单文档
• ✅ 简单的格式调整
• ✅ 快速预览效果
• ✅ 轻量级操作

独立页面适合

• ✅ 复杂文档编辑
• ✅ 需要详细预览
• ✅ 长时间编辑工作
• ✅ 需要更大操作空间
• ✅ 功能演示和教学

🔄 内容同步机制

数据流程

弹窗输入 → Chrome Storage → 独立页面加载↓
内容保存 ← 自动同步 ← 页面打开

同步特性

• 实时保存: 输入内容自动保存
• 自动加载: 页面打开时自动加载
• 文件支持: 支持从文件加载内容
• 剪贴板: 支持粘贴操作

🌟 示例内容

插件内置了完整的功能演示内容，包括：

基础Markdown语法

• 标题层级
• 文本格式
• 列表和表格
• 代码块和引用

高级功能演示

• Mermaid流程图
• 语法高亮代码
• 任务列表
• 链接和图片

使用说明

• 功能特点介绍
• 支持的语法说明
• 操作步骤指导

🧪 测试页面

项目包含多个测试页面用于验证功能：

• test-live-preview.html - 实时预览功能测试
• test-syntax-highlight.html - 语法高亮功能测试
• test-converter-preview.html - 转换器预览功能测试
• test-preview-fix.html - 预览容器修复测试
• test-pdf-fix.html - PDF生成修复测试
• test-preview-ui-update.html - 预览UI更新测试

🐛 故障排除

常见问题

1. 插件无法加载

• 检查Chrome版本是否支持
• 确认开发者模式已开启
• 重新加载扩展程序

2. PDF生成失败

• 检查内容是否为空
• 确认Mermaid图表语法正确
• 尝试简化内容后重试

3. 中文显示问题

• 确认使用了中文字体支持
• 检查内容编码格式
• 更新到最新版本

4. 实时预览不工作

• 检查浏览器控制台是否有错误
• 确认所有JavaScript库已正确加载
• 尝试刷新页面

5. 语法高亮不显示

• 检查highlight.js库是否正确加载
• 确认代码块使用了正确的语言标识
• 查看控制台是否有错误信息

调试方法

• 右键点击插件图标 → “检查弹出内容”
• 打开开发者工具查看控制台输出
• 检查Chrome扩展程序页面的错误信息
• 使用测试页面进行功能验证

🌐 浏览器兼容性

• ✅ Chrome 88+
• ✅ Edge 88+
• ✅ 其他基于Chromium的浏览器

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request来改进这个项目！

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

📋 更新日志

v1.2.0 (最新)

• 🔧 修复了实时预览功能
• 🔧 修复了语法高亮功能
• 🔧 修复了PDF生成中的imgData错误
• 🔧 修复了预览容器DOM查找问题
• 🎨 优化了预览UI设计
• 📱 改进了响应式布局
• 🧪 添加了多个测试页面

v1.1.0

• ✨ 新增独立页面功能
• 🎨 左右分栏布局设计
• 📱 响应式界面优化
• 🔄 内容同步功能
• 🎯 双入口设计

v1.0.0

• 🚀 初始版本发布
• 📄 支持Markdown到PDF/PNG转换
• 🎨 集成Mermaid图表支持
• 💡 添加语法高亮功能
• 🎨 现代化UI设计

---

开始你的Markdown转换之旅吧！ 🚀