logo标签列表

如何将Markdown + CSS转换为PDF？

csspdfmarkdownpandoc
27

我试图将一个Markdown文件转换成PDF。我只想要以下两点:

  • 一种可以轻松更改pdf样式的方法(例如使用CSS文件)
  • 代码块的语法高亮

我可以使用哪些工具来实现这个目标？我尝试过Pandoc，但它使用Latex格式，不易于使用。

4
听起来你需要一个“将渲染后的HTML转换为PDF”的解决方案，而不是一个将Markdown转换为PDF的解决方案。值得一提的是，HTML转PDF很少（几乎从未！）像LaTeX那样有效。 - Chris
相关链接：SuperUser: 如何将Github风格的Markdown转换为PDF。 - Gabriel Staples
6个回答
27

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一起使用。请参见使用pandoc创建PDF。
您也可以尝试使用PanWriter：这是一个我构建的Markdown编辑器，在其中您可以注入CSS并从分页预览中导出PDF。
我找到了一个不错的github.css样式表，并在我的答案中使用了它：https://dev59.com/XGAg5IYBdhLWcg3wOo79#64257218。 - Gabriel Staples
我知道这是一个旧线程，但我正在使用R markdown（带有bookdown包），因为我的style.css文件问题，无法将此文件呈现为PDF版本。我应该在哪里插入这个命令“pandoc -t”? 我感激您的任何帮助。感谢@mb21。 - Luis
我猜如果你想免费获得一个漂亮排版的PDF，你就必须学习LaTeX。问题是，与LaTeX相比，使用Markdown编写/阅读要轻松得多。所以你可能想用Markdown编写，并插入一些LaTeX标签，类似于HTML标签？但我认为这是不可能的。 - Hi-Angel
1
@Hi-Angel 是的，你可以在 pandoc 的 markdown 中包含 raw TeX。 - mb21
6

如何使用pandoc和CSS样式设置在命令行中将markdown .md文档转换为PDF

通过正确的设置，pandoc可以做得很好，但是它仍然缺少我真正希望它具有的代码块下面的灰色背景:(。在@mb21's answer的启发下，这是我为GitHub Flavored Markdown(gfm)想出的相当不错的pandoc命令。

在Ubuntu 20.04上测试通过:

# Install pandoc and dependencies
sudo apt update
sudo apt install pandoc
sudo apt install wkhtmltopdf  # a dependency to convert HTML To pdf

# Download the github.css CSS style theme
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

示例的 markdown 文件，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://istack.dev59.com/RJj4x.webp"> 
</p>

**Align center:**
<p align="center" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp"> 
</p>

**Align right:**
<p align="right" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp"> 
</p>
```

Produces this:

**Align left:**
<p align="left" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp"> 
</p>

**Align center:**
<p align="center" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp"> 
</p>

**Align right:**
<p align="right" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp"> 
</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://istack.dev59.com/RJj4x.webp"> 
</p>
```

上面的 Pandoc 转换命令：

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

输出PDF截图：

与Markdown Viewer相比还不够好，因为它仍然缺少代码块下方的灰色背景（看看我的另一个答案中的效果），但它看起来相当不错！

enter image description here

参见：

  1. [我的回答] SuperUser：如何将Github风格的Markdown转换为PDF
1
顺便提一下，pandoc 的下一个版本也将包含此默认 CSS（https://github.com/jgm/pandoc/blob/master/data/templates/styles.html）。 - mb21
5

有一个非常好用且简单的工具可以浏览Markdown文档，并支持导出PDF功能：

GFMS - Github Flavored Markdown Server

它是一个简单而轻巧（无需配置）的HTTP服务器，您可以在任何包含Markdown文件的目录中启动它来进行浏览。

特点如下：

  • 完整的Github风格Markdown支持
  • 代码语法高亮
  • 浏览文件和目录
  • 漂亮的输出效果（并且可以配置CSS样式表）
  • 导出为PDF（最华丽的markdown-to-pdf输出效果）

gfms -p 8888

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

2
你可以使用 gh-md-to-html 进行此操作，这是一个命令行工具，可以完全满足您的要求（完全透明：我是作者）。
您可以通过 安装 wkhtmltopdf 并使用它来安装 gh-md-to-html。
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选项是指向包含在<style>标签内的css的html文件的路径，该css将被嵌入到生成的html文件中，然后再将该文件转换为pdf。
在底层，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。
0
在某种程度上，我建议只学习你需要的基本LaTeX格式 - 这样可以减少渲染器的解释层次。
然而，pandoc支持HTML输入，因此理论上，您可以将Markdown导出为HTML（带有自定义CSS），然后再次调用pandoc将其转换为HTML。我不知道有多少格式会被保存 - CSS可能非常复杂难以解析。
0
最近我有同样的需求。虽然pandoc很好用，但我不太喜欢它的样式，并且下载一个CSS并使其与之配合非常复杂。也许我只是太懒了！
相反，这里有一个快速的技巧。你可以在jupyter笔记本上创建你的markdown，然后将其下载为PDF。是的，这需要你下载一些库，但我喜欢字体和样式。
另一种更简单的方法是从你的jupyter笔记本中点击"文件"->"打印预览"，然后将其打印为PDF。
您还可以从Jupyter Notebook的“下载为”菜单中进一步自定义。例如：将其下载为HTML并对其进行修改。 - AverageGod
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接