如何转换Markdown + CSS - ＆gt; PDF？

Question

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

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

我可以使用哪些工具？我尝试过Pandoc，但它使用Latex进行格式化，这不容易使用。

Answer 1

Pandoc可以将Markdown转换为HTML，但样式/布局是另一个主题。如果您想生成PDF但使用CSS进行样式化，则需要能够解释CSS的内容。即使用浏览器并打印到PDF，支付Prince或尝试wkhtmltopdf。顺便说一句，pandoc现在也可以使用wkhtmltopdf：

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

但我怀疑如果你想要一个精美排版的PDF免费，你将需要学习LaTeX或ConTeXt这是一个现代的，更独立的LaTeX替代品，两者都可以与pandoc一起使用。请参阅creating a PDF with pandoc。

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

Answer 2

用于浏览Markdown文档的工具非常简单，还支持导出到PDF功能：

GFMS - Github Flavored Markdown Server

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

特点：

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

gfms -p 8888

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

Answer 3

通过正确的设置，pandoc做得很好，但是仍然缺少我真正希望它具有的代码块下面的灰色背景：(。按照{{3}的开头}，这就是我为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格式主题文件：@mb21's answer。它是https://github.com/simov/markdown-viewer/tree/master/themes的一部分，我写过有关Markdown Viewer Chrome plugin 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>
```

上面的Panoc转换命令：

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

输出PDF屏幕截图：

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

in my other answer here

另请参见：

1. [我的回答]

Answer 4

您可以为此使用 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 使用 wkhtmltopdf 将文件转换为 html，然后转换为 pdf。

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

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

Answer 5

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

但是，pandoc确实支持html输入，所以从理论上讲，你可以导出markdown-＆gt; html（使用自定义css），然后再次调用pandoc转换为html。我不知道格式化是否会保存（或者多少） - css可能真的难以解析。