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

下载或克隆此项目到本地
打开Chrome浏览器，进入扩展程序页面：
- 在地址栏输入 chrome://extensions/
- 或者点击菜单 → 更多工具 → 扩展程序
开启"开发者模式"（右上角开关）
点击"加载已解压的扩展程序"
选择项目文件夹，插件将被安装

使用方法

弹窗模式（快速转换）

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

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

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

📝 支持的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

权限配置

json 复制代码

{
  "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来改进这个项目！

贡献指南

Fork 项目
创建功能分支
提交更改
推送到分支
创建 Pull Request

📋 更新日志

v1.2.0 (最新)

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

v1.1.0

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

v1.0.0

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

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