Zi 字媒體

我一直在 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 編輯器了。▍學習使用全新的編輯器 AtomAtom 本身就是一個優秀的編輯器，不僅對各種語言支持良好，自帶了自定義字體、自定義快捷鍵等功能，同時還有大量主題、大量插件可以使用，對 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。在這個插件中不僅可以用這個語法，還增加了 @import "圖片.png" 語法。@import "表格.csv"導入表格文件將會被轉換成 Markdown 表格。@import 還支持其他的一些格式，比如 PDF 和 HTML，這些就需要自己摸索了。再加上 Atom 自帶的「項目文件夾」功能，可以對應本地文件夾實現分類樹管理文檔，與 MWeb 的文檔庫模式相差無幾。更多的高級功能除了這些上面介紹的常用功能，Markdown-preview-enhanced 插件還提供了一些更高級的功能：支持編譯到 GitHub Flavored Markdown可以自定義預覽 CSS（讓你導出的 HTML 更美觀）支持導出 ePub、Mobi、PDF 的電子書文件支持 TOC 生成可以通過代碼繪製流程圖、時序圖以及各種其他種類的圖形如果上面這些高級功能暫時還用不到，那麼試試看這個實用的。你只需要在文章的最上方，加上這樣幾行代碼——--- export_on_save: html: true ---Atom 就會在你保存 md 文件的同時，自動生成一個 HTML 文件。如果你想了解關於這個插件的具體教程和更多信息，可以在 插件介紹頁面 查看。▍手動安裝 Atom 插件的簡單方法但是由於眾所周知的原因，Atom 中的插件安裝功能在某些時候無法下載或者速度非常慢，你可能需要科學上網，或者學會手動安裝 Atom 的插件。我們以這款 Markdown-preview-enhanced 插件為例。下載插件打開 插件的 Github 頁面 ，在 Github 上下載插件的方法是點擊右上角的「Clone or download」然後點擊「Download ZIP」。下載完畢后，將 zip 壓縮包解壓。安裝插件把解壓后的文件夾，整個複製到目錄 「C:\Users\你的電腦用戶名\.atom\packages\」下（你可以在 Atom 的 File → Settings → install 中看到這個目錄的具體位置）複製到這個目錄中之後，按下「Windows 鍵 + R」，輸入 cmd，打開本地命令窗口。輸入 稍等一會兒后，會出現 圖為安裝 Activate-power-mode 插件重新打開 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 !輸入框鍵入以下關鍵詞，獲取相關精選文章