利用 Atom 為自己打造一個專屬 Markdown 編輯器

我一直在 Windows 上尋找一款足夠媲美 MWeb 和 Ulysses 的 Markdown 編輯器。可惜 Windows 上優秀的編輯器較少，於是我盯上了這款本為程序員設計的 Atom 編輯器。

我在對 Atom 有想法之前，使用的 Markdown 編輯器是馬克飛象。馬克飛象不僅可以與 Evernote 進行同步，而且在圖片插入方面也有著不小的優勢。之前我還嘗試過 typora，可惜不太習慣它的「所見即所得」，更喜歡分屏的「編輯 + 預覽」形式。於是我開始尋找 Windows 平台上的 Markdown 編輯器。

Atom 是一款優秀的編輯器，編輯功能完善，更新快，主題豐富，全面支持 Github，對各種編程語言進行了優化。由於採用了模塊化的設計，可定製化程度非常高。它的可拓展性和豐富的插件是一大亮點，號稱「21 世紀的可編程編輯器」。

一次偶然的機會，我發現 Atom 的 Markdown 方面的插件已經非 常成熟，安裝也相對簡單。再加上 Atom 本身的靈活性很強，非常適合定製出一款適合自己的 Markdown 編輯器。

論 Markdown 編輯器的基本素養

我認為一個優秀的 Markdown 編輯器應該具備的功能有以下這些：

• 足夠方便的編輯功能，有全面的快捷鍵
• 支持導出 HTML、PDF 格式的文件
• 方便快捷地插入圖片、鏈接等
• 支持 LaTeX 公式、表格

還有一些加分項：

• 美觀的高亮著色
• 能夠接入各種雲服務
• 可以自定義 CSS 樣式
• 美觀的界面、豐富的主題、自定義字體

通過 Atom 改造的 Markdown 編輯器，已經滿足了大部分條件。

那就讓我們開始改造吧。

第一步：下載並安裝 Atom

我們需要在 Atom 的官網 下載 Atom（支持 Windows、macOS、Linux、FreeBSD 系統），並完成安裝。

第二步：安裝中文補丁

中文環境有助於我們更快地適應 Atom 編輯器。這一步不是必需的，如果你更喜歡英文環境就跳過這一步吧。

在 File 中找到 Settings，進入設置頁面。

點最下面的 Install，搜索 Chinese，找到「simplified-chinese-menu」，然後點擊 Install 即可。

• 如果你的網路環境較差，可以在該插件的 Github 頁面 下載中文補丁。

第三步：下載並安裝 Markdown 增強插件

經過比較，我選擇了這款 Markdown-preview-enhanced 插件，它提供了 Markdown 相關的大部分功能，覆蓋非常全面。

安裝方式與中文補丁類似。在插件安裝界面搜索「markdown-preview-enhanced」，點擊安裝即可。

• 如果你的網路環境較差，可以在該插件的 Github 頁面 下載 Markdown-preview-enhanceed。

做到這一步，你就可以使用經過 Markdown 加持的 Atom 編輯器了。

學習使用全新的編輯器 Atom

Atom 本身就是一個優秀的編輯器，不僅對各種語言支持良好，自帶了自定義字體、自定義快捷鍵等功能，同時還有大量主題、大量插件可以使用，對 Github 的支持更是遠超其他的編輯器。

而且 Atom 自帶了完善的 Markdown 語法支持，在 Markdown-preview-enhanceed 這款插件的加持下，更是如虎添翼。既然是第一次使用，還是需要簡單學習並了解一下這個編輯器的。

基礎性功能的改進

這款插件在編輯方面的改進：

• 自動高亮 Markdown 語法
• 支持預覽滑動同步
• 支持 LaTeX
• 可以利用代碼渲染 TikZ、Chemfig 等圖形

這是 Markdown 編輯器在編輯方面的基礎性功能，最大的亮點是通過代碼生成流程圖、時序圖等。

我利用簡單的幾行代碼，就生成了一個流程圖。

對導入導出功能的改進

在導入導出方面的改進：

• 支持導入外部文件
• 支持導出 PNG、JPEG 格式的文件（需要額外安裝 phantomjs）
• 支持導出 HTML 文件（移動端支持）

在導入圖片的時候，按下 Ctrl + Shift + I，會出現圖片導入助手。支持鏈接、拖拽導入、上傳圖片到圖床等功能。

你也可以直接把圖片拖拽進 Atom ，它會自動上傳到圖床，圖床限定為 imgur.com 和 sm.ms 這兩個。經過測試，imgur.com 短時間內可以上傳 25 張左右的圖片（也可能是流量限制），牆內用戶建議使用 sm.ms，不限量免費上傳圖片，足夠日常使用。但如果文章訪問量較大，還是建議使用自己的 CDN。

Markdown 中導入圖片原本的語法是 ![名稱](圖片.png)。

在這個插件中不僅可以用這個語法，還增加了 @import "圖片.png" 語法。@import "表格.csv"導入表格文件將會被轉換成 Markdown 表格。@import 還支持其他的一些格式，比如 PDF 和 HTML，這些就需要自己摸索了。

再加上 Atom 自帶的「項目文件夾」功能，可以對應本地文件夾實現分類樹管理文檔，與 MWeb 的文檔庫模式相差無幾。

更多的高級功能

除了這些上面介紹的常用功能，Markdown-preview-enhanced 插件還提供了一些更高級的功能：

• 支持編譯到 GitHub Flavored Markdown
• 可以自定義預覽 CSS（讓你導出的 HTML 更美觀）
• 支持導出 ePub、Mobi、PDF 的電子書文件
• 支持 TOC 生成
• 可以通過代碼繪製流程圖、時序圖以及各種其他種類的圖形

如果上面這些高級功能暫時還用不到，那麼試試看這個實用的。

你只需要在文章的最上方，加上這樣幾行代碼——

---nexport_on_save:n html: truen---n

Atom 就會在你保存 md 文件的同時，自動生成一個 HTML 文件。

• 如果你想了解關於這個插件的具體教程和更多信息，可以在 插件介紹頁面 查看。

手動安裝 Atom 插件的簡單方法

但是由於眾所周知的原因，Atom 中的插件安裝功能在某些時候無法下載或者速度非常慢，你可能需要科學上網，或者學會手動安裝 Atom 的插件。

我們以這款 Markdown-preview-enhanced 插件為例。

下載插件

打開 插件的 Github 頁面 ，在 Github 上下載插件的方法是點擊右上角的「Clone or download」然後點擊「Download ZIP」。

下載完畢後，將 zip 壓縮包解壓。

安裝插件

把解壓後的文件夾，整個複製到目錄 「C:Users你的電腦用戶名.atompackages」下

（你可以在 Atom 的 File → Settings → install 中看到這個目錄的具體位置）

複製到這個目錄中之後，按下「Windows 鍵 + R」，輸入 cmd，打開本地命令窗口。

輸入 apm install markdown-preview-enhanced。（如果安裝其他插件就換成其他名字。）

稍等一會兒後，會出現 Installing markdown-preview-enhanced to ... done

重新打開 Atom，至此插件手動安裝完成。

更多的 Markdown 相關個性化插件

如果你覺得 Markdown-preview-enhanced 的許多功能用不到，有些累贅，你可以藉助以下這些插件，單獨定製出一個屬於你的編輯器。

• Markdown-preview-plus 實時預覽增強插件
• Markdown-scroll-sync 同步滾動插件
• Language-markdown Markdown 語法增強插件
• Markdown-writer 更方便地管理圖片、鏈接等
• Markdown-table-editor 表格編輯插件
• Markdown-themeable-pdf PDF導出插件
• Markdown-img-paste 圖片粘貼插件

其實在 Atom 上還有許多優秀的個性化插件，也不乏 Activate-power-mode 這種非常有個性的插件。如果你熟悉 Github，你還可以將 Github 作為雲存儲的方案。

以上這些改進滿足了我對 Markdown 編輯器的絕大部分要求。到這裡，一個由 Atom 改造的 Markdown 編輯器就已經完成了。

Enjoy it !

本文由我撰寫，首發於 少數派。