如何用CSS将Markdown转PDF并生成目录？Pandoc使用疑问及方案

我之前也碰到过Pandoc搭配Wkhtmltopdf时目录、页码不生效的问题，其实核心原因是Wkhtmltopdf对Pandoc默认生成的HTML结构和CSS分页规则支持不够友好，没法正确识别并渲染这些元素。下面给你两种可行的解决思路：

调整参数尝试兼容Wkhtmltopdf #

如果不想换工具，可以先试试调整Pandoc和Wkhtmltopdf的参数，尽量让两者兼容：

• 确保Pandoc生成目录结构：执行命令时加上--toc参数，让Pandoc在HTML中生成目录的锚点结构：

  pandoc input.md --toc -o output.html
  

• 用Wkhtmltopdf渲染时开启内部链接支持，同时强制分页：

  wkhtmltopdf --enable-internal-links --footer-center "Page [page] of [topage]" output.html output.pdf
  

  不过这个方法的局限性比较大，比如复杂的文档结构可能还是会出现页码不连续、目录锚点失效的情况，毕竟Wkhtmltopdf的分页逻辑比较基础。

用Paged.js实现稳定的分页与目录 #

你提到的PagedMedia/Paged.js确实是目前更可靠的方案，它完全基于CSS Paged Media规范，能完美处理目录、页码和复杂分页需求，步骤也很清晰：

1. 先让Pandoc生成带目录的HTML文件：

   pandoc input.md --toc -o output.html
   

2. 安装Paged.js的CLI工具（需要先安装Node.js）：

   npm install -g pagedjs-cli
   

3. 用Paged.js直接将HTML转成带目录和页码的PDF：

   pagedjs-cli output.html output.pdf
   

4. 自定义样式（可选）：如果想调整目录样式、页码位置，可以写一个CSS文件，比如style.css：

   @page {
     size: A4;
     margin: 2cm;
     @top-right {
       content: "Page " counter(page) " / " counter(pages);
       font-size: 0.8em;
       color: #666;
     }
   }
   .toc {
     padding-left: 0;
     list-style: none;
   }
   .toc li {
     margin: 0.5em 0;
   }
   .toc a {
     text-decoration: none;
     color: #2d3748;
   }
   

   然后用Pandoc引入这个CSS文件再生成HTML：

   pandoc input.md --toc --css style.css -o output.html
   

Paged.js的优势在于它对分页逻辑的支持更全面，无论是目录锚点跳转还是页码计数，都比Wkhtmltopdf稳定得多，而且自定义样式的空间也更大。

内容的提问来源于stack exchange，提问作者themthem