Zi 字媒體

用 Atom，在 Windows 上定製屬於自己的 Markdown 編輯器

2021/12/25

我一直在 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。