[英]How to convert Markdown + CSS -> PDF?
I'm trying to convert a Markdown file into a PDF.我正在尝试将 Markdown 文件转换为 PDF。 I'm looking for only two things:
我只寻找两件事:
What tools can I use for that?我可以使用哪些工具? I tried Pandoc, but it uses Latex for the formatting which is not easy to use.
我尝试过 Pandoc,但它使用 Latex 进行格式设置,这不太好用。
Pandoc can convert your Markdown to HTML, but the styling/layout is a different topic. Pandoc 可以将您的 Markdown 转换为 HTML,但样式/布局是一个不同的主题。 If you want to produce a PDF but use CSS for styling, you need something that can interpret CSS.
如果您想生成 PDF 但使用 CSS 进行样式设置,则需要可以解释 CSS 的东西。 That is either use a browser and print to PDF, pay for Prince or try wkhtmltopdf (see also print-css.rocks ).
那要么使用浏览器并打印为 PDF,为Prince付费,要么尝试wkhtmltopdf (另请参阅print-css.rocks )。 Btw, pandoc can also use
wkhtmltopdf
now:顺便说一句,
wkhtmltopdf
现在也可以使用wkhtmltopdf
了:
pandoc -t html --css mystyles.css input.md -o output.pdf
But I suspect if you want a beautifully-typeset PDF for free you'll have to learn LaTeX or ConTeXt which is a modern and more self-contained replacement for LaTeX, both can be used with pandoc.但是我怀疑如果您想要免费排版精美的 PDF,则必须学习 LaTeX 或ConTeXt ,后者是 LaTeX 的现代且更独立的替代品,两者都可以与 pandoc 一起使用。 See creating a PDF with pandoc .
请参阅使用 pandoc 创建 PDF 。
You can also give PanWriter a try: a markdown editor I built, where you can inject CSS and export the PDF from the paginated preview.您还可以尝试PanWriter :我构建的降价编辑器,您可以在其中注入 CSS 并从分页预览中导出 PDF。
There is really nice and simple tool for browsing Markdown documents which additionally supports export to PDF features:有一个非常好的和简单的工具来浏览 Markdown 文档,它还支持导出为 PDF 功能:
GFMS - Github Flavored Markdown Server GFMS - Github 风味降价服务器
It's simple and lightweight (no configuration needed) HTTP server you can start in any directory containing markdown files to browse them.它简单且轻量级(无需配置)HTTP 服务器,您可以在包含 Markdown 文件的任何目录中启动以浏览它们。
Features:特征:
gfms -p 8888
wget "http://localhost:8888/file.md?pdf" -O file.pdf
With the right settings, pandoc
does a pretty good job, but is still missing the grey background underneath the code blocks which I'd really like it to have :(. Following the lead of @mb21's answer , here's what I came up with for a pretty decent pandoc
command for GitHub Flavored Markdown (gfm).使用正确的设置,
pandoc
做得很好,但仍然缺少代码块下方的灰色背景,我真的很喜欢它:(。按照@mb21 的回答,这就是我想出的GitHub Flavored Markdown (gfm) 的一个相当不错的pandoc
命令。
Tested on Ubuntu 20.04:在 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
The wget
command is to download the github.css GitHub CSS formatting theme file from here: https://github.com/simov/markdown-viewer/tree/master/themes . wget
命令是从这里下载 github.css GitHub CSS 格式化主题文件: https : //github.com/simov/markdown-viewer/tree/master/themes 。 It is part of the Markdown Viewer Chrome plugin here , which I wrote about in my other answer here .它是此处 Markdown Viewer Chrome 插件的一部分,我在此处的其他答案中对此进行了介绍。
Breakdown of the pandoc
command from above:从上面对
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
Sample markdown file, test.md:示例降价文件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 conversion command from above:上面的 Pandoc 转换命令:
pandoc -f gfm -t html5 --metadata pagetitle="test.md" --css github.css \
test.md -o test.pdf
Output PDF screenshot:输出PDF截图:
Not quite as good as Markdown Viewer , as its still missing the grey background under the code blocks (see what that looks like in my other answer here ), but it looks pretty good!不如Markdown Viewer好,因为它仍然缺少代码块下的灰色背景(请参阅此处的其他答案中的内容),但看起来不错!
You can use gh-md-to-html for this, which is a command line tool that does exactly what you want (full disclosure: I'm the author).您可以为此使用gh-md-to-html ,这是一个命令行工具,可以完全满足您的需求(完全披露:我是作者)。
You can install it by installing wkhtmltopdf
and by then using您可以通过安装
wkhtmltopdf
来安装它,然后使用
pip3 install gh-md-to-html[pdf_export]
And then use然后使用
gh-md-to-html path_to_your_file.md -p <name>.pdf -c path_to_your_css.html
Let's dissect what the individual parts of this command do:让我们剖析一下这个命令的各个部分是做什么的:
-p
option declares under which file name to save the resulting pdf file; -p
选项声明在哪个文件名下保存生成的 pdf 文件; the " <name>
" is automatically replaced with the name of your input file. <name>
”会自动替换为输入文件的名称。-c
option is a path to a html
-file which contains css within <style>
-tags, which will be embedded into the resulting html file before said file is converted to pdf. -c
选项是html
文件的路径,该文件包含<style>
-tags 中的 css,在将所述文件转换为 pdf 之前,该文件将被嵌入到生成的 html 文件中。 Under to hood, gh-md-to-html
converts the file to html and then to pdf using wkhtmltopdf
, as the name suggests.顾名思义,
gh-md-to-html
使用wkhtmltopdf
将文件转换为 html,然后转换为 pdf。
The resulting pdf file is, in any case, styled similar to how GitHub styles their README files;无论如何,生成的 pdf 文件的样式类似于 GitHub 的 README 文件样式; if you want to disable that so you can dictate the styling as a whole using you custom css, you can supply the option
-s false
to the command, which disables the default styling.如果您想禁用它,以便您可以使用自定义 css 来决定整个样式,您可以为命令提供选项
-s false
,这将禁用默认样式。 Code blocks are properly syntax highlighted in both cases, though.不过,在这两种情况下,代码块都以正确的语法高亮显示。
The conversion process is done partially online (using GitHub's markdown REST API);转换过程部分在线完成(使用 GitHub 的 markdown REST API); in case you don't want that, you can use
pip3 install gh-md-to-html[offline_conversion]
and then run gh-md-to-html
with the -o OFFLINE
option.如果您不想这样做,您可以使用
pip3 install gh-md-to-html[offline_conversion]
然后使用-o OFFLINE
选项运行gh-md-to-html
。
To a certain extent, I'd suggest just learning the basic latex formatting you need - it removes a layer of interpretation by the renderer.在某种程度上,我建议只学习您需要的基本乳胶格式——它消除了渲染器的一层解释。
However, pandoc does support html input, so in theory, you could export markdown->html(with custom css), then call pandoc again to convert to html.但是pandoc确实支持html输入,所以理论上可以导出markdown->html(自定义css),然后再次调用pandoc转换成html。 I don't know if (or how much) of the formatting would be saved - css can be really complicated to parse.
我不知道是否(或多少)格式会被保存 - css 解析起来可能非常复杂。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.