這些工具，讓你寫博客的時(shí)候，只需要專注寫作！
工欲善其事必先利其器，至理名言?。?/p>
當(dāng)你準(zhǔn)備開始寫一篇博客的時(shí)候，你會發(fā)現(xiàn)其實(shí)涉及到的東西還是很多的，尤其是寫公眾號。你會需要編輯器、圖片管理、畫圖、錄屏等等，這些其實(shí)找好了熟練的工具，可以幫你節(jié)約很多的時(shí)間。
開始寫公眾號以來，接觸了很多能幫助我提高效率的寫作工具，***留下了一些比較順手的，推薦給大家。
本身使用的 Mac 環(huán)境，所以這只是從我實(shí)際的情況出發(fā)，來推薦一些工具，其他平臺我想應(yīng)該也有類似的替代產(chǎn)品。
Markdown
Markdown 是一種輕量級的標(biāo)記語言，它允許人們 “使用易讀易寫的純文本格式編寫文檔” ，然后可以方便的轉(zhuǎn)換成其他的格式，例如 HTML 或者 PDF。
而寫技術(shù)博客，***推薦使用 Markdown，語法簡單，可以讓你專注寫作。并且基本上主流的博客平臺，全部提供支持 Markdown 語法的編輯器，寫好了就直接復(fù)制進(jìn)去就可以了。
Markdown 的語法非常簡單，基本上看看文檔，一會兒就能上手，最常用的命令就那么幾個(gè)，用一用基本上就熟練了。
這里就不做過多的介紹了。
Typora編輯器
說到使用 Markdown 來編寫文章，一定要挑一個(gè)好用的編輯器，這里推薦使用 Typora ，它是一個(gè)免費(fèi)的、跨平臺的 Markdown 編輯器，并且所見即所得，可以說是非常的好用！
我選擇 Typora 來寫作的一方面原因是因?yàn)樗旧砭秃芎糜茫硗庖粋€(gè)原因是它渲染的效果，是可以直接應(yīng)用在微信公眾號編輯器內(nèi)的，對于微信公眾號，非常的友好，直接復(fù)制粘貼，然后微調(diào)一下?lián)Q行和空格什么的就可以用，這也是我不太需要關(guān)注排版的一個(gè)原因。
Typora 可以直接在官網(wǎng)下載到。
Typora 對 Mac Book Pro 上的 Touch Bar，適配的也非常好，提供了不少樣式的快捷鍵，讓我使用起來也方便不少，我最喜歡它的引入圖片的快捷鍵，直接能調(diào)起文件夾讓我選擇本地，非常好用。
而 Typora 本身提供了很多 Theme 的樣式用于渲染，這些都可以在官網(wǎng)上進(jìn)行下載！
我們將下載好的 Theme 文件，直接放在 Typora 的對應(yīng)目錄下，就可以識別，找不到目錄可以通過 Preferences 進(jìn)入。
假如推薦的主題依然無法滿足你的要求，你可以找一個(gè)順眼的，然后自己去編輯它的 css 樣式，例如我現(xiàn)在的模板，就是我自己定義的樣式。不過我根據(jù)我的需要，修改了一些細(xì)節(jié)。
當(dāng)你想要按照自己的需要，自定義樣式的時(shí)候，你***在公眾號的編輯器中，實(shí)驗(yàn)預(yù)覽一下最終的效果，因?yàn)閾?jù)我所知有一些樣式在公眾號里是不生效的，而且個(gè)別地方會平白多出一些換行，這個(gè)其實(shí)問題不大，編輯的時(shí)候自己讀一遍，把一些細(xì)節(jié)微調(diào)一下就好了。
需要注意的是，從 Typora 中復(fù)制出去的時(shí)候需要直接復(fù)制才可以攜帶樣式，這種方式對公眾號之類的有效。而如果是掘金、CSDN 之類的，本身提供了 Markdown 的編輯器，就需要右鍵選擇 "Copy As Markdown"，來復(fù)制 Markdown 原格式的文本。
圖床工具
我想一個(gè)讓人易于閱讀的博客，一定會包含一些截圖，因?yàn)楣娞柪飳Υa的支持不太好，所以我文章中的代碼片段，全部以截圖的形式發(fā)布，這樣可以保留原本的樣式，方便閱讀。
既然用到了圖片，而在 Typora 中，可以支持本地路徑或者網(wǎng)絡(luò)圖片地址，多數(shù)情況下，我們希望有一個(gè)圖床能幫我們存放這些圖片，這樣可以方便我們直接在 Markdown 中使用它。
我這里推薦一個(gè) Mac 下的圖床工具，iPic。
1、iPic 的基本使用
iPic 使用起來非常好用，支持拖拽上傳本地圖片和快捷鍵上傳剪切板里的圖片，最終會把上傳好的圖片，在剪切板中，生成一個(gè) Markdown 的標(biāo)簽，我們直接粘貼就可以使用。
這個(gè) Gif 做的不太好，因?yàn)闆]法錄制下 Mac 頂部狀態(tài)欄的效果，大家湊合看吧。iPic 會在頂部提供一個(gè)快捷方式，我們這里講圖片拖拽上去，它就會自動上傳，我們直接在 Typora 里就可以通過粘貼快捷鍵使用上傳后的圖片。
iPic 默認(rèn)情況下，會使用新浪圖床保存圖片，當(dāng)然你可以配置成其它你自己購買的圖片服務(wù)器。這里推薦不要修改它，因?yàn)樾吕藞D床的圖片地址，在公眾號中是可以直接顯示的（復(fù)制可用），其它地址的圖片，我沒有親自試驗(yàn)過。
2、iPic 配合 Typora
iPic 還有一個(gè)非常好用的功能，只需要進(jìn)行一些簡單的配置，就是它可以配合 Typora 直接批量上傳當(dāng)前文檔中的圖片。
我通常的做法是，寫文檔的時(shí)候，在 Typora 中，設(shè)置一個(gè)相對路徑，文章中使用的所有圖片從本地文件夾引用。
然后編輯完文章之后，再使用 Edit → Image Tools → Upload Local Images via iPic ，選擇使用 iPic 上傳，Typora 就可以直接幫我們把當(dāng)前的 .md 文件中，引用的本地圖片，通過 iPic 上傳，并自動替換 Typore 中對應(yīng)的圖片地址，非常的方便。
使用這個(gè)功能，有個(gè)缺點(diǎn)就是不太穩(wěn)定。如果遇到失敗的情況，可以關(guān)閉文件，然后再打開，什么都不要編輯直接上傳，就好了。
3、iPic 的缺點(diǎn)
它有一個(gè)缺點(diǎn)就是對 Gif 圖的適配不是很好，上傳之后就變成了一個(gè)靜態(tài)圖，所以如果你文章內(nèi)有 Gif 圖的話，就需要在對應(yīng)平臺的編輯器內(nèi)單獨(dú)上傳一遍！
錄屏工具
錄屏其實(shí)就分兩種了，一種是手機(jī)錄屏，另外一個(gè)就是電腦錄屏。
錄屏工具很多，一般都會錄制成一個(gè) mp4，不過為了在博客中方便顯示，我會把視頻轉(zhuǎn)換成一個(gè) Gif 圖。
對于 Android 設(shè)備來說，可以直接使用 Android Studio 中的錄屏功能，錄制成一個(gè) MP4，之后再將它轉(zhuǎn)換成一個(gè) Gif 圖。
將視頻轉(zhuǎn)換成 Gif ，推薦使用 LICEcap，其實(shí)就是播放視頻的同時(shí)，進(jìn)行錄屏。
LICEcap 的界面非常的簡潔，它提供了一個(gè)透明的對話框，在其中包裹的內(nèi)容，就是最終生成的 Gif 圖的內(nèi)容，在這個(gè)過程中，它會記錄對話框中包裹內(nèi)容的變化。
作圖工具
在公眾號中寫文章，每篇文章都需要配一個(gè)封面圖（頭圖）。
如果你對這個(gè)要求不高的話，其實(shí)是可以隨便找一張好看的圖片，公眾號里設(shè)置封面圖的時(shí)候有輔助工具，可以幫你直接裁剪圖片到需要的尺寸。
而對這個(gè)圖有要求的話，這里推薦一個(gè)作圖工具：創(chuàng)客貼。
創(chuàng)客貼，可以幫你制作各種尺寸的圖片，并且也有一些自媒體平臺，適合的圖片尺寸，直接編輯使用就好了。我公眾號文章的所有封面圖，都是使用創(chuàng)可貼制作的。
不過創(chuàng)可貼還可以制作一些其他的活動圖，例如我前段時(shí)間推薦 安曉輝 的《程序員的成長課》，就使用創(chuàng)可貼做了一個(gè)活動圖，放在文章底部，效果也還不錯(cuò)！
代碼塊
前面提到，在公眾號文章中，其實(shí)對代碼塊的適配并不好，會出現(xiàn)一些強(qiáng)制換行的問題。
對代碼強(qiáng)制換行的處理，非常的影響閱讀，并且早期的解決辦法，只能解決單一平臺，例如解決了 iPhone ，Android 下就肯定有問題，或者反之也一樣。
我最開始的處理方式是直接使用截圖，而有了 iPic 之后，代碼截圖我就不需要一張一張?jiān)诤笈_上傳，編輯成本就降低了很多。
可使用代碼截圖，雖然對排版會比較友好一些，但是對于閱讀的人，想要復(fù)制出來就只能自己再在 IDE 中敲一遍。如果你對代碼塊是否可復(fù)制這一點(diǎn)，有要求的話，這里再推薦一個(gè)插件：壹伴。
壹伴 是一個(gè)公眾號的 Chrome 擴(kuò)展插件，如果你有心想要運(yùn)營你的公眾號，壹伴 是一個(gè)不錯(cuò)的工具，推薦給你。
壹伴 在代碼塊這一點(diǎn)上，做了很好的適配，可以讓 iPhone 和 Android 手機(jī)上預(yù)覽，達(dá)到一致的體驗(yàn)。
壹伴 是由公司發(fā)布并維護(hù)的，免費(fèi)的功能已經(jīng)很好用了。如果你對 壹伴 有興趣，我這里有個(gè)推薦碼，通過我這個(gè)二維碼進(jìn)行注冊，你我都可以獲得一個(gè)月的高級會員。
它還提供了很多高級功能，可以讓你運(yùn)營公眾號更方便，如果有興趣，可以先掃碼了解一下。
流程圖
一圖勝千字，有時(shí)候?qū)τ谝恍┝鞒瘫容^復(fù)雜的內(nèi)容，繪制一個(gè)流程圖，再配合簡單的文字描述，就非常清晰了。
繪制流程圖，這里推薦一個(gè) Chrome 插件 ，Gliffy Diagrams。
安裝就可用，使用起來也非常的簡單，花幾分鐘熟悉一下就可以上手。
腦圖
腦圖也很火，用于梳理一些概念和知識非常的有用。
暫時(shí)我沒有在博客中使用到腦圖，這里也推薦一個(gè)非常好用的腦圖工具：XMind 。
XMind 非常好用，多平臺支持，我是 Mac + iPhone 上都下載安裝了。不過如果不方便安裝 XMind 的話，可以試試百度腦圖或者其他的替代產(chǎn)品。
小結(jié)
本文推薦的工具，全部是基于我自己寫博客的過程中，使用的一些比較順手的工具。
【本文為51CTO專欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請通過微信公眾號聯(lián)系作者獲取授權(quán)】
