將Markdown轉化為圖片
阿新 • • 發佈：2019-01-25
在看《偷影子的人》這本書時，發現書中有很多動人的描寫和深情的話語，所以想把它們用markdown做成書抄，能夠通過微博分享給朋友們。但是等我摘抄完後，發現並沒有辦法將markdown轉化為長圖片分享出去，這就尷尬了。。。
網路上有很多比較好的線上的markdown編輯器，但是沒有找到哪個編輯器能夠將markdown直接轉化為圖片，而一般都支援匯出為pdf或者網頁的形式。不明白難道是大家都沒有這樣子的需求？
但是自己按捺不住自己的好奇心，決定嘗試一下，希望找到一個比較簡單的方法。
目前的方法如下：
- 使用錘子便籤
- markdown -> html -> 圖片
- markdown -> pdf -> 圖片
直接轉化
錘子便籤
錘子便籤本身就是支援分享為圖片的功能，後來又引入了markdown語法，這就變成了天然的直接將markdown轉化為圖片的工具了，而且分享的圖片比較適合手機使用者檢視。
但是自己沒用過錘子便籤(我使用的是魅族便籤*^_^*)，而且擔心手機端的錘子便籤對markdown語法的支援是不是比較多。
間接轉化
如果你不喜歡錘子便籤匯出的圖片風格，那麼網上有好多的線上markdown編輯器：
小書匠 || 馬克飛象 || Cmd markdown || Dillinger
它們可以生成風格各異的markdown展示，線上使用比較方便，而且可以匯出為pdf和html網頁。
markdown -> html -> picture
以下以
馬克飛象為例，它預設的匯出模板我比較喜歡
- 首先編輯好自己的markdown檔案(線上編輯或者直接貼上過去)，點選右側頂部的選單按鈕，選擇匯出為Html。
- 開啟生成的html檔案，但是發現顯示的文件會排滿整個PC瀏覽器的介面，這肯定是不行的，因為一行有太多的字了。那麼下面就是可以：
- 選擇將瀏覽器的視窗寬度調小（但是這個方法好像不能精確地控制視窗的寬度，但是還可以）；
- 也可以選擇“審查元素”大法了，調整body標籤的寬度（個人試了一下，發現寬度大概為350px-450px為宜）。
- 下面就可以截長圖了（°o°；），哈哈，當然為了建立好看的markdown圖片，不能就這樣草草了事。截長圖推薦一個軟體nimbus(但是發現其中的“塊截圖”偶爾不是很好使)。
- 但是直接擷取的圖片在分佈率上是跟不上的，所以，下面還要用到瀏覽器的放大功能。比如先將瀏覽器放大300%（ctrl+滾輪），再截圖，這時候截的圖的尺寸已經增加為原來的3倍了，所以就會便的很清晰了。
markdown -> pdf -> picture
該方法和上面的一樣都是曲線救國，但是因為將pdf轉化為圖片的過程字型會變得模糊，而且還不能像上面那樣調節解析度，所以，重點還是推薦下面的一個網站。
- 因為線上編輯器匯出的pdf會分成好幾頁，所以最終要想生成一張長圖，所以在markdown儲存為pdf檔案的時候就要注意了：頁邊距設定為0；
- 通過上面網站的pdf頁面拼接功能，將生成的多頁pdf無縫拼接為一頁；
- 然後再利用pdf轉圖片，將pdf轉化為一個長圖片（上面提到了，解析度會受影響）。
自己實現
如果上面的操作過程都不夠簡單靈活的話，那隻能根據自己的要求，自己敲程式碼實現了。或者，找到了別人更好的實現。