如何转换Markdown + CSS - > PDF？

Question

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

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

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

Answer 1

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

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

但我怀疑如果你想要一个精美排版的PDF免费,你将不得不学习LaTeX或ConTeXt,它是LaTeX 的现代和更独立的替代品,两者都可以与pandoc一起使用.请参阅使用pandoc创建PDF.

您也可以尝试PanWriter:我构建的markdown编辑器,您可以在其中注入CSS并从分页预览中导出PDF.

Answer 2

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

有了正确的设置，pandoc效果就很好，但仍然缺少代码块下面的灰色背景，我真的很希望它有:(。按照@mb21 的回答，这是我想出的pandocGitHub Flavored Markdown (gfm) 的相当不错的命令。

在 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://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 3

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

GFMS-Github风味Markdown服务器

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

特征：

• 全面的GFM Markdown支持
• 源代码语法突出显示
• 浏览文件和目录
• 看起来不错的输出（以及可配置的CSS样式表）
• 导出为PDF（我见过的最好的markdown-to-pdf输出）

gfms -p 8888

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

Answer 4

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

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