天從GitHub下載了《Go語言圣經中文版》，大家知道github上的電子書項目，免費且較紙質版本新（感謝翻譯大神們）。那下載下來的github項目一般都是Markdown格式的。怎么轉成Kindle電子書呢？

發現GitBook支持Markdown轉pdf，epub，mobi，html格式。

那就動手吧

1、git clone https://github.com/gopl-zh/gopl-zh.github.com.git #下載電子書項目

2、npm install -g gitbook-cli # 安裝 gitbook 客戶端

3、gitbook -V #檢查安裝是否成功，大寫V，能輸出版本就是成功

--執行命令前，先要重新以管理員權限打開終端，這樣新安裝的gitbook就在PATH路徑中了。

-- 第一次竟然寫錯成小寫v ，導致沒有任何輸出。

4、執行cd 命令 到 gopl-zh.github.com 目錄下。

go run update_version.go #生成版本文件 #要提前安裝過go語言

5、gitbook build #提示缺少插件

6、gitbook install #安裝缺少的插件

7、gitbook build # 編譯成HTML格式。如果前面沒有生成版本文件，則會先提示缺少版本文件

8、gitbook mobi # 生成 mobi格式電子書

gitbook epub

gitbook pdf

如果想在kindle里看，直接用mobi ，當然也可以用Calibre 轉mobi為azw3格式。

言

最近準備搭建一個簡單的文檔平臺，用于組內的文檔管理。作為一個程序員，大多數情況下咱們寫文檔使用的都是markdown語法，比如wiki、hexo、github，然后在瀏覽器上展示。

目前大部分的編輯器都有自己的markdown插件并支持實時預覽，如下圖，

此圖是vscode編輯器，左側是markdown文件，右側是實時預覽的界面，咱們這次的目標就是將markdown在瀏覽器上展示成這個樣式。

marked

為了將markdown在瀏覽器上展示就必須先將markdown轉化為html，有了明確的需求就可以去網上搜尋一下工具，我們很容易就能找到一個使用非常頻繁的工具——marked。

如圖2，它支持在頁面中編譯markdown代碼，但是我們更希望先在后臺完成編譯的工作再將編譯的產物放到頁面中使用，這樣頁面的性能會提示一丟丟，因此我們使用它的node方式。

如圖3，node編譯markdown的步驟也十分簡單，僅需以下幾步，

• 配置marked參數
• 讀取md內容
• 編譯

如圖4，左側是markdown編譯后的html，右側是在瀏覽器中展示的情況，此時完全沒有任何樣式，所以我們還需要為它配置主題。我們選用最流行的樣式——github-markdown-css，把它引入到文件中，再看看效果。

現在頁面已經有樣式了，和github的readme展示的樣式一樣，但是你會發現兩個問題，

• 有些markdown語法不支持，比如表格
• 代碼片段并沒有高亮，如圖5

注意：編譯產物最外層需要包一層容器，容器的class名字為markdown-body，否則樣式不生效。

markdown-it

為了解決上面第一個問題，我們將marked模塊換成markdown-it模塊，用法如下，

此時markdown的大部分語法都已經支持了，但仍有個別語法不支持，不過不要緊，我們可以將markdown-it的html參數設置為true，這樣用戶可以直接用html語法寫markdown。

prism.js

代碼塊沒有高亮是不可接受的，這會讓同志們的瀏覽欲望大大降低。對比了一下highlight.js，我選擇了prism.js。不為別的，就是因為它滿足了我的要求。有人說prismjs比highlight.js對樣式控制的更精細，不過I don't care it。

如圖7，我一眼就看中了這個主題，有趣。那還等什么，直接把js和css都down下來，引入頁面。現在咱們再去看看效果，如下圖，

和我的編輯器主題一樣。

到這里我們已經完成了我們的需求。

總結

將markdown轉化為html其實就兩步，一是選擇編譯工具，需要盡可能多的支持markdown語法，二是選主題，需要看著養眼。

喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！

言

大家好，俺又來了！

好久不見，我是阿文菌，今天來測試一下用新的編輯工具寫作！

很早之前就收藏了@縱筆浮生大佬的教程，今天溫故而知新，深度學習一下：

大佬的2篇教程，必看：

1、張大媽排版神技~吐血分享—再談Markdown here CSS 渲染及全套分享，伸手黨福音~

2、發文效率提升300%的保姆級教程，手把手教你利用Typra配置六大圖床，碼文無縫銜接

去年下半年，我開始換上石墨文檔寫文章，用石墨寫文章的好處是可以方便我復制粘貼文章到多個平臺，比如某博，某條等~

但是，最近石墨關閉了這項功能，除了某條，幾乎都不能復制粘貼了。

無法分發文章，也是對作者一些打擊，雖然我其它平臺的粉絲還沒張大媽這里零頭多~~

實際操作

縱筆浮生大佬的第一篇文章，俺幾乎沒看懂，索性直接從第二篇開始進行操作！

我寫這篇文章，也算是給最近有同樣困境的一些作者一些實操筆記，方便大家少走彎路，高效快速的進入Markdown的懷抱！

當然，這里少不了縱筆浮生大佬的好文章，真的詳細到爆炸！

1、首先，我們下載巨好用的編輯器：Typora

Typora — a markdown editor, markdown reader.

https://typora.io/#windows

2、打開Typora后，就可以開始編輯文章了！在編輯文章的時候，它支持截圖再粘貼圖片到文本中，這個功能很好用！

還支持直接拖拽圖片到文檔里，編輯文章的方式非常的輕量，簡潔！

但是，我個人建議把圖片位置設置一下（文件——偏好設置——圖像中）：

先改成咋們文章對應的文件夾下，這樣方便后續手動傳圖片，等弄好大概的框架后，再研究圖床功能：

3、Typora編輯其實并不復雜，和常用的寫作編輯器一樣！

這里不得不說，大佬的教程真的是巨詳細，很快我就能適應用Typora進行寫作了。

接下來，我們還要搞定導出word文檔的功能！這里，我們需要安裝Pandoc插件：

Install and Use Pandoc (typora.io)

https://support.typora.io/Install-and-Use-Pandoc/

注意，Windows用戶需要下載這個：

pandoc-2.11.4-windows-x86_64.msi

然后一直安裝就可以，安裝完成后，建議重啟下電腦，再用Typora工具就可以導出word文檔了！

點擊 文件——導出——word 即可！

能導出word文檔，其實也可以進行多平臺分發的工作了，到這里，我其實就很滿足了~~~

如果您看到這里，還不太懂，那我簡單來說一下：

大家下載Typora后，就相當于已經在用Markdown來編輯文章了！

只是Markdown的豐富功能，我們還沒完全用上！

其實，我現在的使用體驗和石墨文檔幾乎沒有什么區別，甚至更方便，唯一就是圖片問題，圖片是保存在本地電腦上，這個看個人喜好進行操作。

再后續搭配大佬分享的css主題，簡直如魚得水~

圖床功能

1、但是，如果我們要把這篇文章發布到網上！那么我們的圖片是沒法正常上傳的，除非您手動上傳圖片（也是一種解決方案）。

為了解決這個問題，只有使用圖床功能！

當使用了圖床功能后，我們在截圖或者拖拽圖片到文檔中的時候，圖片會自動上傳到圖床上，這樣可以方便我們后續將文章順利發送到網上：

老規矩，下載插件??！

需要下載PicGo:

Releases · Molunerfinn/PicGo · GitHub

https://github.com/Molunerfinn/PicGo/releases

2、然后跟著浮生大佬的文章操作即可！

這里還要注冊圖床賬號，我一開始選擇了使用七牛云，但是它只提供30天的免費的測試域名，要想穩定使用，必須有備案域名！

備案的話，過程就會非常的復雜，現在的環境不允許我使用！

其它的一些圖床，都有各種限制，真的難受，心里堵得慌~

隨后，我網上查了一些資料！

github、阿里云oss、騰訊云等都不太適合大多數像我們這樣的作者使用，要么認證麻煩，要么收費貴~~

3、然后我現在就暫時用上了唯一可選擇的 SM.MS 圖床了，它就是有部分限制，比如圖片不能超過5MB，每次只能傳10張照片，而且每小時上傳圖片的數量也有限！

優點就是訪問快，好用，目前勉強夠用！而且使用起來也比七牛簡單很多很多，我們只需要 注冊一下 SM.MS 賬號即可：

Image Upload - SM.MS - Simple Free Image Hosting

4、然后在 SM.MS 圖床中，生成 API Access，復制到PicGo里即可，這樣就完成了！

5、接下來，我們只要在編輯的文檔中粘貼圖片，都會上傳到圖床中，然后我們把這篇文章復制到網上的各個平臺的時候，就可以自動上傳圖片了！

不過，有利有弊，使用SM.MS 圖床，唯一擔心的就是圖片會丟失！

為了防止圖片丟失，請一定在截圖軟件里，設置好自動保存，方便以后查找圖片。

另外，我們寫好的文章，也請盡量盡快分享到網絡上！比如分享到張大媽上，就再也不用擔心圖片丟失了~嘿嘿！

截圖軟件，我只推薦 Snipaste，簡直好用到爆！

設置CSS主題和發布文章！

1、接下來就可以將寫好的文章進行發布了！浮生大佬分享了他辛苦設置的主題！

我這里直接進行了借鑒，等后續深入了解Markdown后，再來進行修改自己特色的主題！

我們在張大媽上發布編輯好的文章，需要安裝這個插件：Markdown here

這個插件支持很多瀏覽器：插件安裝地址~

2、我們安裝好瀏覽器插件后，需要替換一下【基本渲染CSS】里面的代碼：

我這里改成浮生大佬分享的它的代碼：參考大佬第二篇內容結尾代碼

3、然后，我們在Typora里面，點擊啟用源代碼模式，復制一下編輯的文章代碼到張大媽的網頁里：

復制完了以后，再右鍵網頁空白處，選擇 Markdown here 轉換，就可以改變文章的樣式了！

大家，現在看到的這篇文章，就是 Markdown的效果！

其實浮生大佬寫得更詳細，大家參考他的操作，一步一步來就可以完成這個操作！

尾巴

其實在很早之前就看到很多大佬都在推薦用這種Markdown的方式來寫文章！

我當時點開了不少這類文章，都給我一個感覺，麻煩，巨麻煩?。?！

但是，真正的實際操作了以后，才發現，原來這么簡單?。?！

簡單擬一下順序：

1、下載Typora，開始編輯文章。

2、安裝Pandoc插件，導出word文檔。

3、注冊SM.MS 圖床，將圖片保存到云端。

4、發布文章，用瀏覽器插件 Markdown here 輸出漂亮頁面！

只要弄熟悉了一次，后面的操作就會非常非常的方便！

如果您，現在還要問我，為啥要用這樣子的編輯器？

其實，它更多是為了方便寫作，不僅能提升寫作的效率，也方便我們將寫好的文章，發布到N個平臺。

可惜石墨文檔已經不能復制粘貼到大部分平臺了！

最后，如果條件允許，俺還是建議您弄一個能備案后的域名，然后用七牛圖床~~~那將完全放心圖片的存儲！

特別是七牛還有很多豐富的功能，比如可以壓縮圖片等操作，這樣大大的方便我們的分發使用！

這篇文章也許有點水，但是個人覺得對很多作者很重要，Markdown會改變大家未來的寫作方式！

好了，文章先寫到這里，無需點贊、收藏，大家可以關注@縱筆浮生大佬，沒有他的文章，我也沒法學會使用這么優秀的工具！

我們下次再見！