如何转换 Markdown + CSS -> PDF？

Question

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

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

我可以使用哪些工具？ 我尝试过 Pandoc，但它使用 Latex 进行格式设置，这不太好用。

Answer 1

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

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

但是我怀疑如果您想要免费排版精美的 PDF，则必须学习 LaTeX 或ConTeXt ，后者是 LaTeX 的现代且更独立的替代品，两者都可以与 pandoc 一起使用。 请参阅使用 pandoc 创建 PDF 。

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

Answer 2

有一个非常好的和简单的工具来浏览 Markdown 文档，它还支持导出为 PDF 功能：

GFMS - Github 风味降价服务器

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

特征：

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

gfms -p 8888

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

Answer 3

使用正确的设置， pandoc做得很好，但仍然缺少代码块下方的灰色背景，我真的很喜欢它:(。按照@mb21 的回答，这就是我想出的GitHub Flavored Markdown (gfm) 的一个相当不错的pandoc命令。

在 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 插件的一部分，我在此处的其他答案中对此进行了介绍。

从上面对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" width="100%">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png"> 
</p>

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

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

Produces this:

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

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

**Align right:**
<p align="right" width="100%">
    <img width="33%" 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" width="100%">
    This text is also aligned to the right.<br>
    <img width="33%" 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好，因为它仍然缺少代码块下的灰色背景（请参阅此处的其他答案中的内容），但看起来不错！

也可以看看：

1. [我的回答] 超级用户：如何将 Github 风味的 Markdown 转换为 PDF

Answer 4

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

您可以通过安装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 文件； “ <name> ”会自动替换为输入文件的名称。
• -c选项是html文件的路径，该文件包含<style> -tags 中的 css，在将所述文件转换为 pdf 之前，该文件将被嵌入到生成的 html 文件中。

顾名思义， gh-md-to-html使用wkhtmltopdf将文件转换为 html，然后转换为 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 。

Answer 5

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

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