如何转换 Markdown + CSS -> PDF？

Question

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

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

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

Answer 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 文件； “<name>”会自动替换为您的输入文件的名称。
• -c 选项是html-文件的路径，该文件包含<style>-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。

Answer 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" 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，因为它仍然缺少代码块下的灰色背景（看看它看起来像in my other answer here），但看起来还不错！

另见：

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

Answer 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。

Answer 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

Answer 5

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

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