如何轉換 Markdown + CSS -> PDF？

Question

我正在嘗試將 Markdown 文件轉換為 PDF。 我只尋找兩件事：

• 一種輕松更改 pdf 樣式的方法（例如使用 CSS 文件）
• 代碼塊的語法高亮器

我可以使用哪些工具？ 我嘗試過 Pandoc，但它使用 Latex 進行格式設置，這不太好用。

Answer 1

Pandoc 可以將您的 Markdown 轉換為 HTML，但樣式/布局是一個不同的主題。 如果您想生成 PDF 但使用 CSS 進行樣式設置，則需要可以解釋 CSS 的東西。 那要么使用瀏覽器並打印為 PDF，為Prince付費，要么嘗試wkhtmltopdf （另請參閱print-css.rocks ）。 順便說一句， wkhtmltopdf現在也可以使用wkhtmltopdf了：

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

但是我懷疑如果您想要免費排版精美的 PDF，則必須學習 LaTeX 或ConTeXt ，后者是 LaTeX 的現代且更獨立的替代品，兩者都可以與 pandoc 一起使用。 請參閱使用 pandoc 創建 PDF 。

您還可以嘗試PanWriter ：我構建的降價編輯器，您可以在其中注入 CSS 並從分頁預覽中導出 PDF。

Answer 2

有一個非常好的和簡單的工具來瀏覽 Markdown 文檔，它還支持導出為 PDF 功能：

GFMS - Github 風味降價服務器

它簡單且輕量級（無需配置）HTTP 服務器，您可以在包含 Markdown 文件的任何目錄中啟動以瀏覽它們。

特征：

• 完整的 GFM Markdown 支持
• 源代碼語法高亮
• 瀏覽文件和目錄
• 漂亮的輸出（和可配置的 CSS 樣式表）
• 導出為 PDF（我見過的最好看的 markdown-to-pdf 輸出）

gfms -p 8888

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

Answer 3

使用正確的設置， pandoc做得很好，但仍然缺少代碼塊下方的灰色背景，我真的很喜歡它:(。按照@mb21 的回答，這就是我想出的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 格式化主題文件： 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 

示例降價文件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 4

您可以為此使用gh-md-to-html ，這是一個命令行工具，可以完全滿足您的需求（完全披露：我是作者）。

您可以通過安裝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]然后使用-o OFFLINE選項運行gh-md-to-html 。

Answer 5

在某種程度上，我建議只學習您需要的基本乳膠格式——它消除了渲染器的一層解釋。

但是pandoc確實支持html輸入，所以理論上可以導出markdown->html（自定義css），然后再次調用pandoc轉換成html。 我不知道是否（或多少）格式會被保存 - css 解析起來可能非常復雜。