Markdown 转 PDF

美化排版/自定义主题

418 次访问
MARKDOWN TO PDF

Markdown 转 PDF

实时预览 · 浏览器打印 → 保存为 PDF · 支持 GFM

Markdown 源文件

预览

说明

浏览器打印 → PDF:点击"导出 PDF"会调用浏览器打印对话框,选择"另存为 PDF"或"Microsoft Print to PDF"即可。

渲染引擎:使用 marked.js 解析 Markdown,支持 GFM(GitHub Flavored Markdown):表格、代码块、删除线、任务列表等。

主题:预览样式简洁,适合大多数文档场景。需要自定义样式可在 CSS 中扩展。

关于本工具

了解工具定位 · 使用场景 · 对比优势

将 Markdown 文档转换为排版精美的 PDF,支持自定义主题、字体、页边距和页眉页脚。适合需要生成报告、文档或电子书的开发者、写作者和学生。转换在浏览器本地完成,内容不上传服务器。

使用场景

📚

技术文档发布

开发者或技术写作人员需要将 Markdown 编写的 API 文档、README 或项目 Wiki 导出为 PDF 分发给客户或团队成员。直接使用浏览器打印往往丢失代码块高亮、表格边框和层级缩进。本工具保留 Markdown 语法结构,并提供自定义主题(如代码配色、标题字体),让输出 PDF 的排版与在线文档一致,省去手动调整样式的重复劳动。

🎓

学术笔记整理

研究生或科研人员日常用 Markdown 记录文献笔记、实验日志,需要定期汇总为 PDF 存档或提交给导师审阅。普通转换工具会打乱数学公式的对齐、破坏引用格式。本工具支持自定义页边距与行间距,可在 PDF 中保留脚注、内联 LaTeX 公式和目录锚点,让笔记从草稿直接变为可正式提交的文档。

📝

简历与作品集

求职者用 Markdown 维护简历或作品集,希望导出为 PDF 时能控制字体、颜色和区块间距,以匹配目标公司的视觉风格。本工具允许导入自定义 CSS 主题,比如将标题设为品牌色、为技能列表添加图标占位符,输出 PDF 时所有样式固化,避免在不同 PDF 阅读器中排版错乱。

📊

项目报告生成

产品经理或项目经理在协作平台(如 Notion、GitLab)上用 Markdown 撰写周报、复盘文档,需要导出为 PDF 发送给外部客户或存档。直接导出常出现图片拉伸、列表缩进丢失等问题。本工具可锁定图片宽高比、设置分页规则(如表格跨页重复表头),让 PDF 输出效果与 Markdown 预览完全一致,减少反复返工。

✍️

电子书排版

独立作者或内容创作者用 Markdown 撰写短篇电子书或教程,需要输出排版精美的 PDF 用于自出版或赠阅。通用转换工具缺乏对封面页、页眉页脚、章节断页的控制。本工具提供多级标题自动生成目录、自定义页眉(如章节名)、以及封面页独立样式,使最终 PDF 接近印刷级排版效果,无需学习 LaTeX 或 InDesign。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (Pandoc)传统方法 (手动排版)
数据隐私纯浏览器处理,文件不上传服务器本地命令行工具,文件不离开本机文件完全在本地,无网络传输
处理速度毫秒级,实时预览秒级(需安装环境)数十分钟到数小时(视文档长度)
离线可用需要网络加载页面,加载后离线可用完全离线(本地安装)完全离线
自定义主题内置多套主题,支持 CSS 覆盖通过模板文件自定义,需编写 LaTeX/CSS完全自由,但需手动调整每个元素
操作门槛零安装,打开网页即用需安装 Pandoc 及 LaTeX 引擎需掌握排版软件(Word/InDesign)
输出一致性浏览器渲染,所见即所得依赖引擎版本,不同系统输出可能微差依赖操作者技能,一致性差
批量处理单文件处理支持命令行批量转换需逐份手动处理
文件大小限制受浏览器内存限制(通常 100MB+)无实际限制无实际限制

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在左侧编辑区粘贴或直接编写 Markdown 内容,支持标准 Markdown 语法
  2. 点击「主题」下拉菜单,选择内置排版样式(如 GitHub、学术、简约等)
  3. 调整页面边距、字体大小、行高等排版参数,右侧实时预览 PDF 效果
  4. 点击「转换为 PDF」按钮,工具在浏览器端完成渲染与导出
  5. 点击「下载 PDF」保存文件,或点击「重新编辑」返回修改

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
# 标题 这是**加粗**文本和*斜体*文本。 - 列表项一 - 列表项二生成的 PDF 文件包含:一级标题(大号黑体)、加粗/斜体文本、无序列表(圆点缩进),默认主题下字体为宋体,行距 1.5 倍。典型场景:基础 Markdown 语法转换
| 列1 | 列2 | | --- | --- | | A | B | | C | D |生成的 PDF 文件包含:带边框的表格,表头加粗居中,单元格内容左对齐,列宽自适应。典型场景:表格内容排版
```python print('Hello') ```生成的 PDF 文件包含:代码块以等宽字体(Consolas)渲染,背景浅灰底色,带行号(可选)。典型场景:代码块高亮显示
![图片](https://example.com/image.png)生成的 PDF 文件包含:图片占位框(因远程图片无法加载),框内显示文件名和尺寸信息。边界 case:远程图片无法加载时的处理
# 标题 正文内容 --- 分割线后内容生成的 PDF 文件包含:水平分割线(细实线,上下间距各 12pt),分割线后内容另起新段落。边界 case:水平分割线渲染效果
这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。这是一段超长文本,没有换行,连续超过 500 个字符。生成的 PDF 文件包含:自动换行,无横向滚动条,行高保持 1.5 倍。边界 case:超长连续文本自动换行
> 引用内容 > 多行引用生成的 PDF 文件包含:引用块左侧灰色竖线,引用文本斜体,背景浅灰底色。易错 case:引用块格式需注意嵌套
1. 第一项 2. 第二项 3. 第三项生成的 PDF 文件包含:有序列表(数字序号),缩进与无序列表一致,序号右对齐。易错 case:有序列表与无序列表缩进不同

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 用四个空格代替缩进

错误
    # 标题
    ## 副标题
修复
# 标题
## 副标题

Markdown 的标题标记 # 必须顶格写,前面不能有空格或 Tab。缩进空格会被当作普通文本,导致标题样式失效,输出为纯文本行。

2. 列表项之间插了空行导致分段

错误
- 项目 A

- 项目 B

- 项目 C
修复
- 项目 A
- 项目 B
- 项目 C

空行在 Markdown 列表中是分段标记。插入空行后,每个列表项会变成独立段落,PDF 中会呈现为多个分离的列表,而非连续列表。

3. 代码块用引号 `>` 包裹

错误
> `console.log('hello')`
修复
```javascript
console.log('hello')
```

引号 `>` 是块引用语法,代码块应使用三个反引号 ``` 包裹。用引号包裹的代码会保留引用样式(左侧竖线、灰色背景),而非等宽字体代码块。

4. 表格列数不匹配

错误
| 名称 | 价格 | 数量 |
|------|------|
| 苹果 | 5 | 2 |
修复
| 名称 | 价格 | 数量 |
|------|------|------|
| 苹果 | 5 | 2 |

分隔行(第二行)的列数必须与表头和数据行一致。列数不匹配会导致整个表格渲染异常,部分列内容合并或显示为纯文本。

5. 图片路径用了相对路径

错误
![截图](./screenshot.png)
修复
![截图](https://example.com/screenshot.png)

Markdown 转 PDF 是纯浏览器端处理,无法访问本地文件系统。相对路径会被解析为当前页面的 URL 路径,导致图片 404 或显示为断裂图标。

6. 数学公式用美元符号但未启用 LaTeX

错误
E = mc^2
修复
$$E = mc^2$$

普通美元符号会被当作普通文本输出。本工具支持 KaTeX 渲染,必须用 `$$` 包裹块级公式或 `$` 包裹行内公式,否则公式显示为字面字符串。

7. 在代码块内使用 Markdown 语法

错误
```markdown
**加粗** 和 *斜体*
```
修复
```markdown
**加粗** 和 *斜体*
```
(输出应为纯文本,这是正确用法)

代码块内的所有内容都会被当作纯文本原样输出。如果在代码块里期望 `**` 生效为加粗,说明混淆了代码块与普通段落的作用域。

8. 用连续空格缩进段落

错误
    这是一个缩进的段落。
修复
> 这是一个缩进的段落。

Markdown 中行首四个空格或一个 Tab 会被解析为代码块(等宽字体、灰色背景),而非段落缩进。要实现引用效果应使用 `>` 块引用语法。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

PDF = render(MD, theme, options)

变量说明

  • MD — 输入的 Markdown 源文本
  • theme — 用户选择的排版主题(CSS 样式集)
  • options — 页面尺寸、字体、边距等参数
  • PDF — 生成的 PDF 文件(字节流)

示例

输入一篇包含标题、列表、代码块的 Markdown 笔记,选择「学术」主题(衬线字体、1.5 倍行距、A4 页面),设置页边距 2cm。工具将 Markdown 解析为 HTML,应用主题 CSS,再通过 Headless Chrome 渲染为 A4 尺寸的 PDF 文件。输出为可直接下载的 PDF 文档,排版与预览一致。

适用范围

适用于任意 Markdown 文本(含 GFM 扩展语法),不依赖特定 Markdown 方言。主题仅影响视觉排版,不改变内容结构。若 Markdown 包含复杂 LaTeX 公式或 SVG 图表,需确保渲染引擎支持对应标签。

原理图

Markdown 文本+ 主题配置浏览器内渲染(Headless 排版)PDF 文件(可下载)自定义主题(字体 / 配色 / 边距)语法检查(表格 / 代码块 / 公式)美化排版(分页 / 对齐 / 样式)
用户输入 本地处理 输出结果 辅助功能

开发者集成

3 种主流语言 · 复制即用

import markdown
from weasyprint import HTML

# 将 Markdown 转换为 HTML,再渲染为 PDF
md_content = """
# 标题

这是 **加粗** 和 *斜体* 文本。

- 列表项 1
- 列表项 2

```python
print("代码块")
```
"""

# 转换为 HTML,启用代码高亮和表格扩展
html = markdown.markdown(md_content, extensions=['fenced_code', 'tables', 'codehilite'])

# 自定义 CSS 美化排版
custom_css = """
@page { size: A4; margin: 2cm; }
body { font-family: 'Helvetica', sans-serif; line-height: 1.6; }
h1 { color: #2c3e50; border-bottom: 2px solid #3498db; }
code { background: #f4f4f4; padding: 2px 5px; border-radius: 3px; }
"""

# 生成 PDF
HTML(string=html).write_pdf('output.pdf', stylesheets=[custom_css])
print('PDF 已生成:output.pdf')
package main

import (
	"fmt"
	"os"
	"strings"

	"github.com/yuin/goldmark"
	"github.com/go-pdf/fpdf"
)

func main() {
	// 解析 Markdown 为纯文本(简化示例)
	source := []byte("# Hello\n\nThis is **bold** text.")
	var buf strings.Builder
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}

	// 创建 PDF,设置 A4 和字体
	pdf := fpdf.New("P", "mm", "A4", "")
	pdf.AddPage()
	pdf.SetFont("Helvetica", "", 12)

	// 写入内容(实际需解析 HTML 标签,此处简化)
	pdf.MultiCell(190, 10, buf.String(), "", "L", false)

	// 输出文件
	if err := pdf.OutputFileAndClose("output.pdf"); err != nil {
		fmt.Fprintf(os.Stderr, "写入 PDF 失败: %v\n", err)
		os.Exit(1)
	}
	fmt.Println("PDF 已生成:output.pdf")
}
const fs = require('fs');
const marked = require('marked');
const puppeteer = require('puppeteer');

(async () => {
  // 读取 Markdown 文件
  const md = fs.readFileSync('input.md', 'utf-8');

  // 转换为 HTML,启用 GFM 扩展
  const html = marked.parse(md, { gfm: true });

  // 添加自定义样式
  const styledHtml = `
    <html>
    <head>
      <style>
        body { font-family: 'Arial', sans-serif; padding: 40px; }
        h1 { color: #333; border-bottom: 1px solid #ccc; }
        pre { background: #f5f5f5; padding: 10px; border-radius: 5px; }
      </style>
    </head>
    <body>${html}</body>
    </html>
  `;

  // 使用 Puppeteer 生成 PDF
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(styledHtml, { waitUntil: 'networkidle0' });
  await page.pdf({ path: 'output.pdf', format: 'A4', margin: { top: '20mm', bottom: '20mm' } });

  await browser.close();
  console.log('PDF 已生成:output.pdf');
})();

常见问题

7 个高频疑问

Markdown 转 PDF 时,代码块里的代码会走样吗?怎么保证排版好看?
走样通常是因为原 Markdown 中的代码块没有指定语言(导致无语法高亮),或者用了非标准围栏。本工具内置了 50+ 种语言的语法高亮主题(如 GitHub、Monokai),代码块默认带行号和浅色背景。要保证排版:1)用三个反引号包裹代码并标注语言;2)避免在代码块内混用制表符和空格缩进;3)行内代码用单个反引号。工具会按 CSS 打印样式规则强制分页,避免代码行在页脚处被截断。
为什么我转出来的 PDF 里表格的边框粗细不一样?
Markdown 表格本身不定义边框样式,本工具默认使用 1px 实线边框。出现粗细不均通常是:1)原 Markdown 中有空单元格或缺失分隔符(如 `|---|` 写成了 `|--|`),导致解析器将相邻单元格合并;2)表格嵌套了 HTML 标签(如 `<table border="2">`),Markdown 解析器会忽略 HTML 属性,改用工具默认样式。建议:先在本工具的预览区检查表格结构是否完整,再用「自定义主题」功能调整边框颜色和宽度(支持 CSS 变量覆盖)。
转出来的 PDF 里图片特别模糊,怎么调清晰?
模糊的原因是 Markdown 中引用的图片分辨率太低(如 72dpi 的网页截图),PDF 渲染时按屏幕分辨率缩放。解决:1)直接用原始高分辨率图片链接(建议宽度 ≥ 1200px);2)如果图片是本地文件,拖拽到工具上传区后,工具默认以 150dpi 嵌入,可以在「图片设置」中手动改为 300dpi;3)避免使用 `![alt](image.jpg =200x100)` 这种 Markdown 扩展语法强制缩放,工具不支持该写法,会按原始尺寸输出。
我的 Markdown 里有数学公式,能正常转成 PDF 吗?
支持 LaTeX 行内公式(`$...$`)和块级公式(`$$...$$`),底层用 KaTeX 渲染。注意:1)公式中的特殊符号(如 `\`、`{}`)必须正确转义;2)不支持 `\label` 和 `\ref` 交叉引用;3)如果公式太长,PDF 中会自动换行,但不会自动缩放字号,建议手动在合适位置加 `\\` 断行。测试过的宏包包括 `\frac`、`\sum`、`\int`、`\sqrt`、`\mathrm`,复杂化学式(如 `\ce{}`)需用 `\text{}` 包裹。
这个工具跟 Typora 或 VS Code 里直接导出 PDF 有什么区别?
核心区别在于排版控制力和场景定位。Typora/VS Code 的导出是基于本地渲染引擎(如 wkhtmltopdf 或 Chromium),主题固定,修改样式需改 CSS 文件。本工具是纯浏览器端 Headless 方案,特点:1)「自定义主题」面板可直接选预设(如学术论文、简历、博客)或微调字体、行距、页边距,无需写代码;2)支持导出时自动生成目录(基于 Markdown 标题层级);3)无需安装软件,浏览器打开即用。劣势:不支持本地文件系统拖拽批量转换,单次最多 500KB 源文件。
转出来的 PDF 里中文字体全是方框乱码,怎么解决?
方框乱码是 PDF 渲染时找不到对应字体导致的。本工具内置了思源黑体(Noto Sans SC)和思源宋体(Noto Serif SC),覆盖 GB2312 常用汉字。如果仍出现乱码:1)检查 Markdown 中是否使用了非常用汉字(如𬀩、𬱖)——这些字在思源字体中可能缺失,建议用通用汉字替代;2)如果自定义主题中指定了其他字体(如「微软雅黑」),工具会回退到内置字体,但回退优先级按 CSS `font-family` 顺序,建议只保留内置字体名称;3)遇到生僻字时,工具会在日志区提示「缺失字形」。
工具把 Markdown 转成 PDF 时,文件大小会变大很多吗?怎么控制?
大小增长主要来自两处:1)嵌入的图片(原图多大,PDF 中多大,不会压缩);2)字体子集化(每个 PDF 会嵌入用到的汉字字形)。实测一篇 10KB 纯文本 Markdown(含 50 个汉字),转出 PDF 约 120KB;如果含一张 1MB 的截图,PDF 约 1.1MB。控制方法:在「输出设置」中开启「字体子集化」(默认开启,只嵌入用到的字符,而非整个字体文件),以及将图片压缩到 1024px 宽度以下再上传。工具不支持 PDF 压缩,如需进一步缩小,建议用 Adobe Acrobat 或 Ghostscript 后处理。
选择 打开 +新窗口 esc关闭