[TOC]  Demo 影片: https://youtu.be/VCg170FvXIM 常常看到大家會用 hackmd 來寫文件 但是找不到方法匯出好看的 PDF 常常會有排版跑掉或是底色不見的問題 寫篇筆記紀錄一下一些讓 hackmd 列印 PDF 更美觀的技巧 ## 使用工具 - 瀏覽器與 Devtools (F12) - PrintEditWE 擴充功能 - https://addons.mozilla.org/en-US/firefox/addon/print-edit-we/ - https://chromewebstore.google.com/detail/print-edit-we/olnblpmehglpcallpnbgmikjblmkopia - CSS ## 步驟 ### 置中圖片與表格 (CSS) 在編輯器中加入以下 CSS 來讓圖片跟表格自動置中: ``` <style> p:has(img) { text-align: center; } .markdown-body img { max-width: 70%; } .markdown-body table { display: table; max-width: 85%; margin-left: auto; margin-right: auto; } </style> ``` 調整 `max-width` 可以控制你的圖片寬度 另外要注意一下 加上這段 CSS 後會讓圖片附近的文字一起置中 (剛好可以當圖片標號)  如果不想被置中 空一行就好  ### 打開瀏覽模式 hackmd 右上角分享有個瀏覽模式的連結 按下預覽 這就是我們要用 PrintEditWE 編輯的目標  ### 刪除 hackmd 列印 CSS 樣式 hackmd 預設有用 `@media print` 調整列印時樣式 包括把你的 codeblock 背景拔掉等等 這時候用 devtools 可以輕鬆把它註解掉 到樣式編輯器 找某個 `pretty-vendor.xxx.css` 右邊應該會看到一個 `@media print` 點他跳到相對應的 CSS rule 再按下行數那邊的小三角形把 CSS 折疊起來 最後一次選起來  按下 `Ctrl + /` 把選起來的 `@media print` 註解掉  ### PrintEditWE 編輯元素 要等網頁跑完 不然圖片會缺 像這樣:  選主要有文件的那個元素 (上面會有一段 padding) 選 `Delete Except > Unrestricted`  接下來設定 `Format` 點一下 `Dimensions` 跟下面的 `Padding T: 0` + `Padding B: 0`  這樣我們就只留下文件本體 並且讓他滿版  ### 預覽 按下上面的 `Preview` 或是 `Ctrl + P` 即可開啟瀏覽器的列印介面  `更多選項` 裡面的 `列印背景` 要打開 不然一樣沒有 codeblock 跟表格的底色  接下來可以參考左邊的預覽結果進行微調 或是直接進行[輸出](#輸出) ### 微調 #### 強制換頁 有時候為了方便閱讀 會希望段落要分頁 這時候只要透過 devtools 選取元素 之後點你要強制換頁的元素 上面加上 `page-break-before: always` 的 CSS 規則即可  #### 圖片寬度 有些圖片可能太高也會影響你的換頁 或是單純太佔排版 一樣是用 devtools 加上 `max-width` 來對圖片單獨調整寬度 ### 輸出 選擇列印方式為 `儲存到 PDF` 按下儲存 就能得到整齊美觀的 hackmd pdf 了!