使用Atom打造無懈可擊的Markdown編輯器

2021-02-15 技術點滴

一直以來都奢想擁有一款全能好用的Markdown編輯器，直到遇到了Atom。廢話不多說，直接開搞！

1. 安裝Atom

下載安裝Atom：https://atom.io/

2. 增強預覽(markdown-preview-plus)

Atom自帶的Markdown預覽插件markdown-preview功能比較簡單，markdown-preview-plus對其做了功能擴展和增強。

支持預覽實時渲染。(Ctrl + Shift + M)

支持Latex公式。(Ctrl + Shift + X)

使用該插件前，需要先禁用markdown-preview。

查看實時渲染和公式編輯功能。

3. 同步滾動(markdown-scroll-sync)

同步滾動是Markdown編輯器的必備功能，方便翻閱文檔修改時能快速定位到預覽的位置。

markdown-scroll-sync不僅支持同步滾動，在光標位置發生變更時也會同步滾動，這個功能在很多Markdown編輯器中不具備。

4. 代碼增強(language-markdown)

一般的Markdown編輯器提供了代碼著色等基本功能，language-markdown除了能給代碼著色，還提供了快捷的代碼片段生成等功能。

5. 圖片粘貼(markdown-image-paste)

圖片功能支持的好壞直接決定了我是否選擇使用一個Markdown編輯器。也有不少編輯器和在線的圖床綁定，但是這種方式受限於網絡。雖然Markdown支持插入本地圖片，但是每次插入新圖片都是一堆重複操作：截圖－命名－保存－插入。markdown-image-paste將這些操作一步完成：

使用截圖工具將圖片複製到系統剪切板。

在Markdown新起一行輸入文件名。

Ctrl + V 會自動把圖片保存到Markdown文件相同目錄下(因此要求Markdown文件應該先保存)，並命名為剛輸入的文件名，同時在剛才輸入文件名行處生成img標籤。

當然，如果想插入gif動圖就不能這麼簡單了，還是老老實實地下載這個工具手工插入吧。

LICEcap: http://www.cockos.com/licecap/

6. 表格編輯(markdown-table-editor)

一直對Markdown的table語法很無愛，直到遇到了markdown-table-editor，這操作效率簡直炸了！文字已經不能表達我的激動之情了，直接看圖吧。

7. pdf導出(markdown-themeable-pdf、pdf-view)

不少Markdown編輯器都會提供pdf導出功能，甚至將其作為收費功能。而Atom的markdown-themeable-pdf、pdf-view插件可以輕鬆實現pdf導出和預覽功能。

安裝markdown-themeable-pdf時遇到了一些坑，在此分享一下：

由於GFW的問題，導致該插件使用的phantomjs模塊無法安裝成功，從而導出pdf報告錯誤。

解決辦法是：

從官網下載phantomjs二進位安裝包：http://phantomjs.org/download.html

解壓下載的phantomjs-2.1.1-macosx.zip壓縮文件。

添加index.js文件到解壓後的目錄。

將整個目錄的內容拷貝到：~/.atom/packages/markdown-themeable-pdf/node_modules/phantomjs-prebuilt，注意目錄phantomjs-2.1.1-macosx被重命名為phantomjs-prebuilt

重啟Atom，右鍵->Markdown to PDF即可，生成的pdf文件在Markdown文件同目錄。

其中index.js文件內容為：

module.exports = {  path : __dirname + '/bin/phantomjs'}

8. 總結

以上介紹的Atom的Markdown插件，基本上滿足了我對一個Markdown編輯器的所有幻想，實時渲染、同步滾動，公式、代碼、圖片、表格的快捷操作與支持，以及pdf文件導出、預覽等。希望此文對你有所幫助。

相關焦點

  • MarkDown使用教程(In Atom)
    其實嚴格來說，MarkDown沒有專門的編寫工具，通過簡單的文本編輯器即可編寫MarkDown文本，比如Windows的記事本。但簡單的文本編輯器功能欠缺，沒有高亮的文字表現，更沒有文本效果可言，就像沒有人用記事本寫代碼一樣，最起碼也得用個Edit Plus。
  • 我的前端故事----優美的編輯器GitHub Atom
    插件篇效果可在插件首頁中查看atom-beautify：這是個美化代碼的插件，幾乎支持所有主流的語言，完全可以滿足前端同學的使用。grunt-runner：作為一個前端，grunt相信大家都聽說過，因為這個插件你就可以直接在編輯器裡面操作你的grunt任務了。git-plus：雖然原生的Atom就支持了git命令，但是這個插件會讓你更加喜歡在Atom中使用git，這非常方便在Windows上使用git的同學。
  • 打造一款基於monaco-editor及markdown-it的Markdown編輯器(上)
    前言本文的 Markdown 編輯器主要是 Monaco editor + markdown-it 實現 markdown 編輯以及預覽，目前實現了：文章複製功能；Markdown 轉 html 基本樣式；自定義 table 插件以及 h 標籤插件
  • 使用 Angular2+ 開發 Markdown 編輯器
    前段時間我向分享 Chat 的白宦成老師請教 Markdown 的問題，他向我推薦 Typora 編輯器，我覺著這就是我一直想要的 Markdown 編輯器，於是我就想到了這個主題。要做一個 Markdown 編輯器，首先需要解析 Markdown，根據 Github 上 most stars 排序，JavaScript 類的 marked 排第一，網上用的人也比較多，但是我喜歡另外一個 markdown-it，主觀感覺特性豐富，而且插件比較多，有 MathJax 的插件，挺好用的。
  • 高顏值可調教,打扮老婆用Atom就夠了
    縱觀所有的產品中，簡書的markdown編輯器已經算是首屈一指的優秀，圖片粘貼功能一直被我認為是最貼心的設計。不過，Atom中，對markdown的支持，甚至更加強大。對於熱愛markdown寫作的人來說，Atom同樣是一款擁有無窮魅力的寫作軟體。我不怕它無法滿足你的需求，就怕你不給機會去了解它，那麼，這將是一場遺憾的錯過。so，我們一起來體驗一下這款編輯器/寫作神器的魅力吧！
  • 推薦 8 個必備的 Atom 插件!
    cd 上次給大家推薦了一款優秀的編輯器 Atom，要知道好的編輯器配上牛逼的插件，效率提升的不是一點兩點啊！
  • 【Atom】用最酷的編輯器 寫最美的代碼
    忘記看直接推送的朋友可以點擊下面文字查看網站目錄的使用說明，長按掃描下方二維碼跳轉網站目錄。固定布局                                                        工具條上設置固定寬高背景可以設置被包含可以完美對齊背景圖和文字以及製作自己的模板寫代碼本應該是很享受的事情，我們有極客高效的 Vim，簡約美麗的 Sublime Text，從小至最為純粹的編輯器，到大至包羅萬物的 IDE。
  • 使用逐浪CMS做網站如何引用Markdown編輯器
    Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。一份使用 Markdown 格式撰寫的文件可以直接以純文本發布，並且看起來不會像是由許多標籤或是格式指令所構成。下面來看下逐浪CMS中是如何配置Markdown 編輯器的:首先逐浪CMS後臺的內容編輯，默認是採用Markdown 編輯器，在下圖內容編輯可以看到。
  • 使用Atom文本編輯器的 5 個理由
    在判斷一個編輯器的功效時，只要它能做一件事：編輯文字，就能滿足 80% 的要求。另外的 20% 則是額外的便利、額外的小玩意和花哨的功能。它們是很好的東西，但幾乎不是必不可少的。不過我經常回到 Atom，因為作為一個開源的用戶，只要我願意，我就可以奢侈地有很多應用使用。以下是我喜歡 Atom 的原因。
  • 推薦 6 款 macOS 上牛拜的 Markdown 編輯器
    TyporaTypora 被認為是功能最全，最快的 Markdown 編輯器之一。它沒有將編輯區和渲染結果區分開，而是將兩者合二為一，所見即所得，也可以通過內置的菜單欄來進行格式化。這款編輯器不局限於編寫 Web 內容，它還提供了對表格、圖形和數學格式的支持，以方便撰寫研究論文。
  • 打造一個優雅的微信文章編輯器
    之前訪問了下百度和404搜尋引擎，總結一下大家提供的方法，無非是三種：下載Chrome瀏覽器插件 MarkdownHere，在上面先自定義好自己想要的css樣式，然後再微信富文本編輯器上用 markdown語法寫好文章內容，再一鍵轉換，但你會發現，效果差強人意；使用第三方平臺的微信排版器，如下圖：  非常蛋疼是，基本上是卡片式寫作，每寫一段就要拖動出來一個新的卡片容器
  • MarkDown編輯器
    WORD或者富文本編輯器，But，當我們辛辛苦苦寫了一篇文章，但因為格式，顏色等因素給人不舒服的感覺，就想換一個編輯器了，所以，查看網際網路各個便器器，發現MarkDown編寫最為簡單、好看，所以就整理了各個MarkDown編輯器，如果小夥伴們需要編輯軟體，都可以去官網下載哦。
  • Github工具分享之易使用可擴展的MarkDown編輯器Markdown Monster
    介紹Markdown Monster是一款易於使用且可擴展的Markdown Editor，Viewer和Windows Weblog Publisher。我們的目標是為Windows提供最佳的Markdown特定編輯器，並儘可能輕鬆地創建Markdown文檔。
  • 神級編輯器 Vim 使用-插件篇
    markdown 的目錄結構.markdownlint[16]一款 markdown 語法檢查工具, 可以根據預設的規則進行 markdown 語法錯誤警告或提示, 可根據需要進行規則自定義安裝brew install markdownlint-cli使用
  • Seafile Markdown 編輯器介紹 -- 更好用的 Markdown 所見即所得編輯器
    Seafile 從 6.3 版本開始加入了所見即所得的 Markdown 編輯器，又在 7.0 版本對它進行了大幅的改進，並把它作為 Seafile 知識管理功能的基礎，可以使用 Markdown 語法編輯 Wiki 文檔內容。這裡我們對其他的 Markdown 編輯方案進行一下對比，然後再對 Seafile 的 Markdown 編輯器功能進行介紹。
  • 文本編輯器大比拼:誰才是真正的編輯器之王?
    作為第一篇，我想先聊聊各大文本編輯器，這是程式設計師最喜歡爭論的話題之一。我還在讀研究生時，很喜歡折騰各種編輯器，還寫了一系列文章，當時受【善用佳軟】邀請發布在了他的博客上（剛訪問，發現他的博客已經 4 年沒更新了，還好可以訪問），文章列表見：[序列文章] 打造全能的文本編輯器[1]。
  • 推薦十大最受歡迎的markdown編輯器!
    隨著它的普及，出現了許多Markdown編輯器，使製作內容變得更加簡單。下面，我們看一下最受用戶喜愛的10個編輯器。1. TyporaTypora 是目前最受歡迎的Markdown編輯器之一，這有充分的理由。與您在此列表中找到的許多編輯器不同，Typora自動隱藏Markdown格式，而是顯示最終文檔的預覽。
  • Typora:簡單高效的 Markdown 編輯器
    Typora 是一款簡單、高效而且非常優雅的 Markdown 編輯器，它提供了一種所見即所得的全新的 Markdown 寫作體驗。在過去兩年多的時間裡，我幾乎每天都使用 Typora 寫作，日記、工作、博客等等都是使用 Typora 寫的。我也曾嘗試過換用其它的編輯器，甚至一些收費的，但最終還是回到了 Typora 的懷抱。不為別的，就因為它太好用了，我已經習慣了它的便捷和高效。可以說 Typora 已經成為了我工作生活的一部分，它讓我更加專注的寫作，它的快捷操作和實時預覽甚至都可以讓我忘了 Markdown 語法。
  • atom美 6件套使用心得
    以前用過的化妝品，其中很多人推薦過我別的化妝品，但是覺得都差不多，所以一直用了15年。但是這次的atom美化妝品就不一樣了，化妝後皮膚一直滋潤柔軟有彈性，所以現在開始打算用 atom美的化妝品。我跟我妹妹講了ATOM美的化妝品，她問我真的想換嗎?我很確信的說：是，這個太好了。她也試用過了，然後她也把以前用過的化妝品就不用了，也開始用atom美的化妝品了。
  • 私藏多年的Markdown編輯器,全部分享給你
    相信很多人都使用 Markdown 來編寫文章，Markdown 語法簡潔，使用起來很是方便，而且各大平臺幾乎都已支持 Markdown 語法那麼，如何選擇一款趁手的 Markdown 編輯器，就是一個問題了，特別是對於我這樣的強迫症來說。市面上的各種 Markdown 編輯器，幾乎都被我試用個遍，但是沒有一款讓我完全滿意的，它們都各有優缺點。