05_Github編輯器Atom之:Markdown + Latex 公式 + 離線插件安裝 + Markdown生成PDF


時間:2018-03-24 作者:魏文應


一、說明

Atom 這個軟件是開源免費的,由業界良心 Github 推出,插件功能強大。我用過 Sublime 編輯器,相對來說 Atom 安裝插件更方便,界面也很好看。目前我主要用 Atom 來做以下事情:

  • 寫 Markdown : 在本地端寫 Markdown 文檔,妥妥的,寫好以后通過 Git 保存到云端。
  • 導成 PDF: 將 Markdown 導出生成PDF,目前來看(2018-09-12),Atom 導出的 PDF, 要比另外一款叫做 VScode 的編輯器導出的 PDF 好看。VScode 導出的PDF中文字體有問題,有粗有細:
    對比生成的PDF
    Atom 事實上生成的是 Github上面顯示的樣式,VScode 編輯器的 Markdowm PDF 顯然沒有處理好 CSS 樣式問題。微軟免費開源的 VScode 編輯器有很多優點,就寫 Markdown 而言,如果 VScode 的樣式問題解決了,我們再轉用微軟的 VScode 也不遲。

值得注意的是,目前(2018-09-12),微軟收購了 Github 公司,微軟 VScode 編輯器和 Atom 編輯器有很多相似的地方,后續看 Atom 如何升級維護也是一個問題。但如果你只是寫 Markdown ,依然推薦你使用 Atom 這個軟件。

二、安裝環境

下面是我測試的安裝的系統環境和軟件版本,其實 Atom 安裝很容易,一鍵傻瓜式安裝就可以了。

  • 操作系統:windows 7 64bit
  • Atom 版本:Atom 1.25.1

三、安裝Atom

  • Atom官網 下載 Atom 安裝包:

    下載頁面

四、Atom中的插件管理

Atom 編輯器具有很強的可擴展性,這些擴展性是通過安裝插件的形式實現的。所以,當你想用一個新的功能時,你可能需要安裝插件。

安裝插件

安裝插件,依次點擊:

File -> Settings -> Install

  • 安裝軟件的界面

在 Install 安裝軟件的界面里,你可以聯網 搜索你需要的插件,然后點擊后面的 Install 按鈕安裝即可。

查看已安裝的插件

如何查看 已經安裝有哪些插件 呢? 可以點擊 File -> Settings -> Packages ,就會列出你已經安裝有哪些插件:

  • 已經安裝的插件

如果你想 禁用某個插件,點擊對應插件后面的 Disable 即可,當顯示為 Enable 時為禁用狀態。你可以再次點擊 Enable 啟用插件 。如果想卸載創建,可以點擊對應插件的 Uninstall 按鈕。注意:有些時候,禁用和啟用插件,需要重啟 Atom 編輯器才可以生效。

下載的插件在哪呢?

有時候,我們想保存下載下來的插件包,并打包分發到其它電腦上,這樣就不用重新下載插件了。對于沒有網絡的內網來說比較用。安裝插件時,下載的包都在 .aton/packages ,文件夾 .aton 是隱藏文件。這個目錄一般在用戶目錄下:

C:\Users\331075\.atom\packages

比如我的用戶名為 331075,默認就在上面這個目錄下:

  • 插件包的位置

插件的快捷鍵

當我們安裝了相應的插件,如何知道它 快捷鍵 呢?其實從一級菜單的 Packages 中,我們也能看出安裝了哪些插件,鼠標移動到相應的創建,就能做相應的操作,而且還列出了相應的快捷鍵。

  • 查看插件快捷鍵

比如上面的 Markdown to PDF 這個插件(你可能還沒有安裝這個插件,你看一下其它的),你除了可以直接點擊它,讓它生成 PDF ,也可以按照它提示的快捷鍵 Ctrl + Shift + C 來執行生成 PDF 。

五、使用 Atom 編輯 Markdown 文檔

如果你想使用 Atom 編輯 Markdown 文檔,那么就需要安裝 Markdown 相關的插件。接下來,我將演示如何安裝這些插件。

安裝 Markdown 插件

安裝 Markdown 插件之前,我們先 禁用 Atom 自帶的 Markdown 插件,因為自帶的插件功能不夠強大。查看已安裝插件列表: File -> Settings -> Packages ,找到 markdown-preview 這個插件(事實上,默認安裝了的插件比較多,不容易找到,你應該在搜索框中輸入markdown-preview ,進行搜索查找),找到以后,點擊 Disable 禁用它:

  • 禁用默認的 markdown-preview 插件

接下來點擊 Install 選項,在對話框中輸入 markdown,然后點擊 Packages 進行搜索,會出現一些與 markdown 相關的插件:

  • 插件安裝的界面

在上面這個 Install 安裝插件界面的搜索框中,搜索并安裝下面的插件(注意:安裝前,先看后面的 “六、插件安裝注意事項”):

搜索的插件名稱 作用 安裝
markdown-preview-plus 增強版的預覽功能 點擊對應的 Install 按鈕
markdown-image-pase 支持直接粘貼圖片到文檔中 點擊對應的 Install 按鈕
language-markdown 對應 Markdown 語法進行高亮顯示 點擊對應的 Install 按鈕
markdown-pdf 生成 Markdown PDF 文檔 點擊對應的 Install 按鈕

安裝完成以后,就可以在 Packages 插件列表中,看到我們安裝的插件了。注意:插件的安裝,有時需要重啟 Atom 編輯器才可以生效

編輯 Markdown 文檔

首先創建一個 Markdown 文件,Markdown 文本文件的 文件后綴名.md

  • markdown 后綴名

使用 Atom 打開這個文件,并編寫 Markdown 文檔(前提是你會 Markdown 語法):

  • markdown 顯示效果!

上面就是 Markdown 的顯示效果,左邊是 Markdown 原文,右邊是顯示效果。右邊稱為 預覽,鼠標放在原文區域,同時按下 Shift + Ctrl + M 快捷鍵,就可以 打開預覽窗口 了。

Markdown 生成 PDF 文檔

Markdown 生成 PDF 比較簡單,如果你安裝了 markdown-pdf 插件,鼠標放在目標 Markdown 編輯區域,按下 Shift + Ctrl + C 快捷鍵即可,過一會就會在當前文件夾目錄下生成 PDF 文件了。

  • 生成PDF

Markdown 支持 Latex 公式

LaTex 公式是用于編寫數學公式的,比如,Markdown 源文件中你這么寫:

$$ S = \int_{a}^b f(x) \mathrmcrf6fkyx = F(b) - F(a) $$

Markdown 就會顯示這樣:

S = \int_{a}^b f(x) \mathrmumjguzgx = F(b) - F(a)

LaTex 語法是獨立,本來和 Markdown 語法沒有半毛錢關系。但是我們經常要用到數學公式,這時就需要有個支持 Markdown + LaTex 雙語法的插件。我們的 markdown-preview-plus 巧好滿足這樣的需求,在 File -> Settings -> Packages 中找到 markdown-preview-plus 這個插件,點擊這個插件的 Settings ,設置插件:

  • 支持數學公式的選項

將這個支持 Latex 數學公式的 Enable Math Rendering By Default 選項勾選上,這樣就支持數學公式了(需要重啟一下 Atom 編輯器)。當然也要看一下快捷鍵功能是否打開,如果沒有打開則打開快捷鍵功能,將下面 Enable 勾選上就可以了:

  • 使能Keybinding

Markdown 粘貼圖片

安裝了 markdown-image-paste 插件,就可以使用 Ctrl + V 快捷鍵粘貼圖片了。不過這個圖片必須處于編輯狀態,比如通過 QQ 截圖,然后直接粘貼就可以:

  • 直接 Ctrl + C 粘貼

截圖后,直接 Ctrl + C 粘貼就可以了(不需要另存為,截圖時,截圖軟件已經將圖片自動復制到粘貼板上了)。粘貼后就會在 Markdown 源文件中這么表示圖片:

![](.png)

然后你可以在當前文件夾目錄下,看到一個圖片文件:

  • 截圖的圖片文件

不過,我們必須在文件夾中,修改這個圖片文件的名稱,比如修改為 圖片1.png ,然后在 Markdown 源文件中也這樣修改:

![](圖片1.png)

在中括號 [ ] 中,可以寫上圖片小標題,比如上圖中的 截圖的圖片文件 這幾個字:

![截圖的圖片文件](圖片1.png)

如果你不修改圖片名稱,下次粘貼時,新圖片會覆蓋原來名為 .png 這圖片,導致原來的圖片沒有了。而且在預覽中,是 看不到 截圖的圖片文件 這幾個字的 ,只有在網頁中才能看到。如果你直接選中文件夾中的某個圖片,復制粘貼,你會發現在 Markdown 源碼文本中死活粘貼不了,這就是我們剛才說的,圖片必須處于編輯狀態才可以直接粘貼。如果你有了一個圖片文件,直接復制到和 Markdown 文檔同一個目錄下,然后通過這個文件名引用圖片就可以了。當然,Markdown 中的圖片是支持相對路徑的:

![](..\圖片1.png)

上面的寫法意思是,圖片在當前 Markdown 文件的上一層目錄中,這樣做的好處就是,我們所有的圖片可以單獨放在一個文件夾中。

六、插件安裝注意事項

markdown-pdf 插件安裝問題

在安裝 markdown-pdf 插件之前,需要先添加 phantomjs 相應目錄下 。到 phantomjs 官網下載 phantomjs 軟件包 ,官網網址如下:

http://phantomjs.org/download.html

將下載壓縮包解壓以后,復制其內容到下面的文件夾內(C:\Users\331075 我的用戶名,剩下的部分是一樣的):

C:\Users\331075\.atom\packages\markdown-pdf\node_modules\phantomjs-prebuilt

如果你沒有安裝過 markdown-pdf ,那么你可能沒有這個路徑,可以手動相應文件夾:

markdown-pdf\node_modules\phantomjs-prebuilt
  • 復制粘貼的 phantomjs-prebuilt 的內容

如果已經安裝了 markdown-pdf,卻不能使用,就先卸載 markdown-pdf,再安裝 phantomjs,然后安裝 markdown-pdf,就可以正常使用了。為什么要用 phantomjs 呢? phantomjs 是一個 WebKit 瀏覽器引擎,有相應的 CSS 選擇器,PDF 顯示時,需要用到這個瀏覽器引擎。

七、離線安裝 Atom 插件

因為國內有墻的存在,如果沒有科學上網,那么,你很能在線安裝不成功。這時候,你需要離線安裝 Atom 插件。離線安裝前,你需要安裝下面兩個軟件:

下面,我以安裝 markdown-image-paste 插件為例,演示如何離線安裝插件。

下載離線包

我們要先找到這個插件的 Github 地址,然后從 Github 網站上下載這個插件。在 Atom 編輯器的 Install 中,搜索找到這個插件,點擊它:

  • 找到對應插件

就能看到它上面的 github 地址:

  • 點擊進入下載頁面

然后在 github 頁面找到下載地址:

  • 點擊Clone or download 查看下載地址

然后打開電腦的 cmd 終端進入 C:\Users\331075\.atom\packages (其中 331075 是用戶名,請根據你的電腦用戶名而定)。在這個目錄下,執行下面命令下載你需要的插件:

git clone https://github.com/nmecad/markdown-img-paste.git

下載完成后,就會在 C:\Users\12093\.atom\packages 這個目錄下,生成一個名為 markdown-image-paste 文件夾,這個就是我們剛才下載的插件:

  • 下載插件的目錄

離線包安裝

離線包已經下載下來了,剛才下載的是 markdown-image-paste ,進入這個文件夾,并執行以下命令:

npm install

  • 下載并安裝

然后,重啟 Atom 編輯器,就能在 packages 里看到剛才安裝的 markdown-image-paste 這個插件了。不過這么安裝,發現一個問題,就是點擊 Disable 那個按鈕沒有反應,也沒有 Settings 選項:

  • disable按鈕沒有反應

八、其它有用插件

  • simplified-chinese-menu 插件: Atom 中文插件,可以使 Atom 菜單文字為中文顯示。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容