如何转换 Markdown + CSS -> PDF？

Posted

技术标签:

【中文标题】如何转换 Markdown + CSS -> PDF？【英文标题】：How to convert Markdown + CSS -> PDF? 【发布时间】：2014-07-12 13:58:45 【问题描述】：

我正在尝试将 Markdown 文件转换为 PDF。我只在寻找两件事：

一种轻松更改 pdf 样式的方法（例如使用 CSS 文件） 代码块的语法高亮显示

为此我可以使用哪些工具？我尝试了 Pandoc，但它使用 Latex 进行格式化，不太好用。

【问题讨论】：

听起来您正在寻找“将 html 渲染为 PDF”的解决方案，而不是 Markdown 到 PDF 的解决方案。作为记录，HTML -> PDF 很少（从来没有！）像 LaTeX 一样好。 相关：SuperUser: How Can I Convert Github-Flavored Markdown To A PDF. 【参考方案1】：

您可以为此使用gh-md-to-html，这是一个命令行工具，可以完全满足您的需求（完全披露：我是作者）。

您可以通过installing wkhtmltopdf安装它，然后使用

pip3 install gh-md-to-html[pdf_export]

然后使用

gh-md-to-html path_to_your_file.md -p <name>.pdf -c path_to_your_css.html

让我们剖析一下这个命令的各个部分的作用：

-p 选项声明在哪个文件名下保存生成的 pdf 文件； “&lt;name&gt;”会自动替换为您的输入文件的名称。 -c 选项是html-文件的路径，该文件包含&lt;style&gt;-tags 中的css，在将所述文件转换为pdf 之前，该文件将嵌入到生成的html 文件中。

在后台，gh-md-to-html 将文件转换为 html，然后使用 wkhtmltopdf 转换为 pdf，顾名思义。

无论如何，生成的 pdf 文件的样式类似于 GitHub 对其 README 文件的样式；如果您想禁用它以便可以使用自定义 css 指定整体样式，您可以为命令提供选项-s false，这将禁用默认样式。 不过，在这两种情况下，代码块都会正确突出显示语法。

转换过程部分在线完成（使用 GitHub 的 markdown REST API）；如果您不想这样，您可以使用pip3 install gh-md-to-html[offline_conversion]，然后使用-o OFFLINE 选项运行gh-md-to-html。

【讨论】：

【参考方案2】：

通过正确的设置，pandoc 做得很好，但仍然缺少我非常希望它拥有的代码块下方的灰色背景 :(。在 @mb21's answer 的引导下，这就是我想出了一个相当不错的pandoc GitHub Flavored Markdown (gfm) 命令。

在 Ubuntu 20.04 上测试：

sudo apt update
sudo apt install pandoc
sudo apt install wkhtmltopdf  # a dependency to convert HTML To pdf
wget https://raw.githubusercontent.com/simov/markdown-viewer/master/themes/github.css

# Convert test.md to test.pdf using the github.css CSS style theme
pandoc -f gfm -t html5 --metadata pagetitle="test.md" --css github.css \
test.md -o test.pdf

wget 命令是从这里下载 github.css GitHub CSS 格式化主题文件：https://github.com/simov/markdown-viewer/tree/master/themes。它是Markdown Viewer Chrome plugin here 的一部分，我写过in my other answer here。

从上面分解pandoc 命令：

-f gfm    # from format = Github Flavored Markdown
-t html5  # to format = html5
--metadata pagetitle="test.md"  # html output format (-t html) requires a 
    # mandatory html title, so just set it to the input file name:
    # "test.md"
--css github.css  # use the github.css file as the CSS styling file for
                  # the html output
test.md      # this is the INPUT markdown (Github Flavored Markdown) file
-o test.pdf  # save the OUTPUT PDF as test.pdf

示例降价文件，test.md:

Snippet from my project here: https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md

## 1.1. Align images left, right, or centered, with NO WORD WRAP:

This:

```html
**Align left:**
<p align="left" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

**Align center:**
<p align="center" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

**Align right:**
<p align="right" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>
```

Produces this:

**Align left:**
<p align="left" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

**Align center:**
<p align="center" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

**Align right:**
<p align="right" >
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

If you'd like to set the text itself to left, center, or right, you can include the text inside the `<p>` element as well, as regular HTML, like this:

```html
<p align="right" >
    This text is also aligned to the right.<br>
    <img  src="https://i.stack.imgur.com/RJj4x.png"> 
</p>
```

上面的 Pandoc 转换命令：

pandoc -f gfm -t html5 --metadata pagetitle="test.md" --css github.css \
test.md -o test.pdf

输出PDF截图：

不如Markdown Viewer，因为它仍然缺少代码块下的灰色背景（看看它看起来像in my other answer here），但看起来还不错！

另见：

    [我的回答]SuperUser: How Can I Convert Github-Flavored Markdown To A PDF

【讨论】：

顺便说一句。 pandoc 的下一个版本还将包含this default CSS...【参考方案3】：

Pandoc 可以将您的 Markdown 转换为 HTML，但样式/布局是一个不同的主题。如果您想生成 PDF 但使用 CSS 进行样式设置，则需要可以解释 CSS 的东西。那就是使用浏览器并打印为 PDF，支付Prince 或尝试wkhtmltopdf（另请参阅print-css.rocks）。顺便说一句，pandoc 现在也可以使用wkhtmltopdf：

pandoc -t html --css mystyles.css input.md -o output.pdf

但我怀疑，如果您想要免费排版精美的 PDF，您必须学习 LaTeX 或 ConTeXt，这是 LaTeX 的现代且更独立的替代品，两者都可以与 pandoc 一起使用。见creating a PDF with pandoc。

您也可以试试PanWriter：我构建的一个降价编辑器，您可以在其中注入 CSS 并从分页预览中导出 PDF。

【讨论】：

我找到了一个很好的 github.css 样式表，并在我的回答中使用了它：***.com/a/64257218/4561887。 我知道这是一个旧线程，但我使用的是 R markdown（带有 bookdown 包），由于我的 style.css，我无法将此文件呈现为 PDF 版本。我应该在哪里插入这个命令“pandoc -t”？ .我很感激这方面的任何帮助。谢谢@mb21 “我怀疑如果你想免费获得排版精美的 PDF，你必须学习 LaTeX”——问题是，在 Markdown 中书写/阅读比在 LaTeX 中要痛苦得多。所以你想用 Markdown 写，并用我猜的一些 LaTeX-tags 插入它，类似于 html-tags？我认为这是不可能的。 @Hi-Angel 是的，您可以在 pandoc 的降价中包含 raw TeX【参考方案4】：

Markdown 文档浏览工具非常好用且简单，还支持导出为 PDF 功能：

GFMS - Github Flavored Markdown Server

它简单轻量（无需配置）HTTP 服务器，您可以在任何包含 Markdown 文件的目录中启动以浏览它们。

特点：

完整的 GFM Markdown 支持 源代码语法高亮 浏览文件和目录 漂亮的输出（和可配置的 CSS 样式表） 导出为 PDF（我见过的最好看的 Markdown 到 PDF 输出）

gfms -p 8888

wget "http://localhost:8888/file.md?pdf" -O file.pdf

【讨论】：

【参考方案5】：

在某种程度上，我建议只学习您需要的基本乳胶格式 - 它消除了渲染器的一层解释。

不过pandoc确实支持html输入，所以理论上你可以导出markdown->html(带自定义css)，然后再调用pandoc转成html。我不知道是否会保存（或保存多少）格式 - css 解析起来可能真的复杂。

【讨论】：

以上是关于如何转换 Markdown + CSS -> PDF？的主要内容，如果未能解决你的问题，请参考以下文章

markdown转pdf之后不显示图片

如何将网页内容转换为markdown

如何将 Markdown 文件转换为 PDF

如何将 word 文件转换为 markdown 文件

markdown 如何更改绝对定位的CSS元素的偏移父元素？

markdown 如何居中图像（Bootstrap 3,4或纯HTML / CSS）