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

時(shí)間：2018-03-24 作者：魏文應(yīng)

一、說(shuō)明

Atom 這個(gè)軟件是開(kāi)源免費(fèi)的，由業(yè)界良心 Github 推出，插件功能強(qiáng)大。我用過(guò) Sublime 編輯器，相對(duì)來(lái)說(shuō) Atom 安裝插件更方便，界面也很好看。目前我主要用 Atom 來(lái)做以下事情：

  • 寫 Markdown ： 在本地端寫 Markdown 文檔，妥妥的，寫好以后通過(guò) Git 保存到云端。
  • 導(dǎo)成 PDF： 將 Markdown 導(dǎo)出生成PDF，目前來(lái)看（2018-09-12），Atom 導(dǎo)出的 PDF， 要比另外一款叫做 VScode 的編輯器導(dǎo)出的 PDF 好看。VScode 導(dǎo)出的PDF中文字體有問(wèn)題，有粗有細(xì)：
    對(duì)比生成的PDF
    Atom 事實(shí)上生成的是 Github上面顯示的樣式，VScode 編輯器的 Markdowm PDF 顯然沒(méi)有處理好 CSS 樣式問(wèn)題。微軟免費(fèi)開(kāi)源的 VScode 編輯器有很多優(yōu)點(diǎn)，就寫 Markdown 而言，如果 VScode 的樣式問(wèn)題解決了，我們?cè)俎D(zhuǎn)用微軟的 VScode 也不遲。

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

二、安裝環(huán)境

下面是我測(cè)試的安裝的系統(tǒng)環(huán)境和軟件版本，其實(shí) Atom 安裝很容易，一鍵傻瓜式安裝就可以了。

  • 操作系統(tǒng)：windows 7 64bit
  • Atom 版本：Atom 1.25.1

三、安裝Atom

四、Atom中的插件管理

Atom 編輯器具有很強(qiáng)的可擴(kuò)展性，這些擴(kuò)展性是通過(guò)安裝插件的形式實(shí)現(xiàn)的。所以，當(dāng)你想用一個(gè)新的功能時(shí)，你可能需要安裝插件。

安裝插件

安裝插件，依次點(diǎn)擊：

File -> Settings -> Install

  • 安裝軟件的界面

在 Install 安裝軟件的界面里，你可以聯(lián)網(wǎng) 搜索你需要的插件，然后點(diǎn)擊后面的 Install 按鈕安裝即可。

查看已安裝的插件

如何查看 已經(jīng)安裝有哪些插件 呢？ 可以點(diǎn)擊 File -> Settings -> Packages ，就會(huì)列出你已經(jīng)安裝有哪些插件：

  • 已經(jīng)安裝的插件

如果你想 禁用某個(gè)插件，點(diǎn)擊對(duì)應(yīng)插件后面的 Disable 即可，當(dāng)顯示為 Enable 時(shí)為禁用狀態(tài)。你可以再次點(diǎn)擊 Enable 啟用插件 。如果想卸載創(chuàng)建，可以點(diǎn)擊對(duì)應(yīng)插件的 Uninstall 按鈕。注意：有些時(shí)候，禁用和啟用插件，需要重啟 Atom 編輯器才可以生效。

下載的插件在哪呢？

有時(shí)候，我們想保存下載下來(lái)的插件包，并打包分發(fā)到其它電腦上，這樣就不用重新下載插件了。對(duì)于沒(méi)有網(wǎng)絡(luò)的內(nèi)網(wǎng)來(lái)說(shuō)比較用。安裝插件時(shí)，下載的包都在 .aton/packages ，文件夾 .aton 是隱藏文件。這個(gè)目錄一般在用戶目錄下：

C:\Users\331075\.atom\packages

比如我的用戶名為 331075，默認(rèn)就在上面這個(gè)目錄下：

  • 插件包的位置

插件的快捷鍵

當(dāng)我們安裝了相應(yīng)的插件，如何知道它 快捷鍵 呢？其實(shí)從一級(jí)菜單的 Packages 中，我們也能看出安裝了哪些插件，鼠標(biāo)移動(dòng)到相應(yīng)的創(chuàng)建，就能做相應(yīng)的操作，而且還列出了相應(yīng)的快捷鍵。

  • 查看插件快捷鍵

比如上面的 Markdown to PDF 這個(gè)插件（你可能還沒(méi)有安裝這個(gè)插件，你看一下其它的），你除了可以直接點(diǎn)擊它，讓它生成 PDF ，也可以按照它提示的快捷鍵 Ctrl + Shift + C 來(lái)執(zhí)行生成 PDF 。

五、使用 Atom 編輯 Markdown 文檔

如果你想使用 Atom 編輯 Markdown 文檔，那么就需要安裝 Markdown 相關(guān)的插件。接下來(lái)，我將演示如何安裝這些插件。

安裝 Markdown 插件

安裝 Markdown 插件之前，我們先 禁用 Atom 自帶的 Markdown 插件，因?yàn)樽詭У牟寮δ懿粔驈?qiáng)大。查看已安裝插件列表： File -> Settings -> Packages ，找到 markdown-preview 這個(gè)插件（事實(shí)上，默認(rèn)安裝了的插件比較多，不容易找到，你應(yīng)該在搜索框中輸入markdown-preview ，進(jìn)行搜索查找），找到以后，點(diǎn)擊 Disable 禁用它：

  • 禁用默認(rèn)的 markdown-preview 插件

接下來(lái)點(diǎn)擊 Install 選項(xiàng)，在對(duì)話框中輸入 markdown，然后點(diǎn)擊 Packages 進(jìn)行搜索，會(huì)出現(xiàn)一些與 markdown 相關(guān)的插件：

  • 插件安裝的界面

在上面這個(gè) Install 安裝插件界面的搜索框中，搜索并安裝下面的插件（注意：安裝前，先看后面的 “六、插件安裝注意事項(xiàng)”）：

搜索的插件名稱 作用 安裝
markdown-preview-plus 增強(qiáng)版的預(yù)覽功能 點(diǎn)擊對(duì)應(yīng)的 Install 按鈕
markdown-image-pase 支持直接粘貼圖片到文檔中 點(diǎn)擊對(duì)應(yīng)的 Install 按鈕
language-markdown 對(duì)應(yīng) Markdown 語(yǔ)法進(jìn)行高亮顯示 點(diǎn)擊對(duì)應(yīng)的 Install 按鈕
markdown-pdf 生成 Markdown PDF 文檔 點(diǎn)擊對(duì)應(yīng)的 Install 按鈕

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

編輯 Markdown 文檔

首先創(chuàng)建一個(gè) Markdown 文件，Markdown 文本文件的 文件后綴名 為 .md ：

  • markdown 后綴名

使用 Atom 打開(kāi)這個(gè)文件，并編寫 Markdown 文檔（前提是你會(huì) Markdown 語(yǔ)法）：

  • markdown 顯示效果!

上面就是 Markdown 的顯示效果，左邊是 Markdown 原文，右邊是顯示效果。右邊稱為 預(yù)覽，鼠標(biāo)放在原文區(qū)域，同時(shí)按下 Shift + Ctrl + M 快捷鍵，就可以 打開(kāi)預(yù)覽窗口 了。

Markdown 生成 PDF 文檔

Markdown 生成 PDF 比較簡(jiǎn)單，如果你安裝了 markdown-pdf 插件，鼠標(biāo)放在目標(biāo) Markdown 編輯區(qū)域，按下 Shift + Ctrl + C 快捷鍵即可，過(guò)一會(huì)就會(huì)在當(dāng)前文件夾目錄下生成 PDF 文件了。

  • 生成PDF

Markdown 支持 Latex 公式

LaTex 公式是用于編寫數(shù)學(xué)公式的，比如，Markdown 源文件中你這么寫：

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

Markdown 就會(huì)顯示這樣：

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

LaTex 語(yǔ)法是獨(dú)立，本來(lái)和 Markdown 語(yǔ)法沒(méi)有半毛錢關(guān)系。但是我們經(jīng)常要用到數(shù)學(xué)公式，這時(shí)就需要有個(gè)支持 Markdown + LaTex 雙語(yǔ)法的插件。我們的 markdown-preview-plus 巧好滿足這樣的需求，在 File -> Settings -> Packages 中找到 markdown-preview-plus 這個(gè)插件，點(diǎn)擊這個(gè)插件的 Settings ，設(shè)置插件：

  • 支持?jǐn)?shù)學(xué)公式的選項(xiàng)

將這個(gè)支持 Latex 數(shù)學(xué)公式的 Enable Math Rendering By Default 選項(xiàng)勾選上，這樣就支持?jǐn)?shù)學(xué)公式了（需要重啟一下 Atom 編輯器）。當(dāng)然也要看一下快捷鍵功能是否打開(kāi)，如果沒(méi)有打開(kāi)則打開(kāi)快捷鍵功能，將下面 Enable 勾選上就可以了：

  • 使能Keybinding

Markdown 粘貼圖片

安裝了 markdown-image-paste 插件，就可以使用 Ctrl + V 快捷鍵粘貼圖片了。不過(guò)這個(gè)圖片必須處于編輯狀態(tài)，比如通過(guò) QQ 截圖，然后直接粘貼就可以：

  • 直接 Ctrl + C 粘貼

截圖后，直接 Ctrl + C 粘貼就可以了（不需要另存為，截圖時(shí)，截圖軟件已經(jīng)將圖片自動(dòng)復(fù)制到粘貼板上了）。粘貼后就會(huì)在 Markdown 源文件中這么表示圖片：

![](.png)

然后你可以在當(dāng)前文件夾目錄下，看到一個(gè)圖片文件：

  • 截圖的圖片文件

不過(guò)，我們必須在文件夾中，修改這個(gè)圖片文件的名稱，比如修改為 圖片1.png ，然后在 Markdown 源文件中也這樣修改：

![](圖片1.png)

在中括號(hào) [ ] 中，可以寫上圖片小標(biāo)題，比如上圖中的 截圖的圖片文件 這幾個(gè)字：

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

如果你不修改圖片名稱，下次粘貼時(shí)，新圖片會(huì)覆蓋原來(lái)名為 .png 這圖片，導(dǎo)致原來(lái)的圖片沒(méi)有了。而且在預(yù)覽中，是 看不到 截圖的圖片文件 這幾個(gè)字的 ，只有在網(wǎng)頁(yè)中才能看到。如果你直接選中文件夾中的某個(gè)圖片，復(fù)制粘貼，你會(huì)發(fā)現(xiàn)在 Markdown 源碼文本中死活粘貼不了，這就是我們剛才說(shuō)的，圖片必須處于編輯狀態(tài)才可以直接粘貼。如果你有了一個(gè)圖片文件，直接復(fù)制到和 Markdown 文檔同一個(gè)目錄下，然后通過(guò)這個(gè)文件名引用圖片就可以了。當(dāng)然，Markdown 中的圖片是支持相對(duì)路徑的：

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

上面的寫法意思是，圖片在當(dāng)前 Markdown 文件的上一層目錄中，這樣做的好處就是，我們所有的圖片可以單獨(dú)放在一個(gè)文件夾中。

六、插件安裝注意事項(xiàng)

markdown-pdf 插件安裝問(wèn)題

在安裝 markdown-pdf 插件之前，需要先添加 phantomjs 相應(yīng)目錄下 。到 phantomjs 官網(wǎng)下載 phantomjs 軟件包 ，官網(wǎng)網(wǎng)址如下：

http://phantomjs.org/download.html

將下載壓縮包解壓以后，復(fù)制其內(nèi)容到下面的文件夾內(nèi)（C:\Users\331075 我的用戶名，剩下的部分是一樣的）：

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

如果你沒(méi)有安裝過(guò) markdown-pdf ，那么你可能沒(méi)有這個(gè)路徑，可以手動(dòng)相應(yīng)文件夾：

markdown-pdf\node_modules\phantomjs-prebuilt
  • 復(fù)制粘貼的 phantomjs-prebuilt 的內(nèi)容

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

七、離線安裝 Atom 插件

因?yàn)閲?guó)內(nèi)有墻的存在，如果沒(méi)有科學(xué)上網(wǎng)，那么，你很能在線安裝不成功。這時(shí)候，你需要離線安裝 Atom 插件。離線安裝前，你需要安裝下面兩個(gè)軟件：

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

下載離線包

我們要先找到這個(gè)插件的 Github 地址，然后從 Github 網(wǎng)站上下載這個(gè)插件。在 Atom 編輯器的 Install 中，搜索找到這個(gè)插件，點(diǎn)擊它：

  • 找到對(duì)應(yīng)插件

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

  • 點(diǎn)擊進(jìn)入下載頁(yè)面

然后在 github 頁(yè)面找到下載地址：

  • 點(diǎn)擊Clone or download 查看下載地址

然后打開(kāi)電腦的 cmd 終端進(jìn)入 C:\Users\331075\.atom\packages （其中 331075 是用戶名，請(qǐng)根據(jù)你的電腦用戶名而定）。在這個(gè)目錄下，執(zhí)行下面命令下載你需要的插件：

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

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

  • 下載插件的目錄

離線包安裝

離線包已經(jīng)下載下來(lái)了，剛才下載的是 markdown-image-paste ，進(jìn)入這個(gè)文件夾，并執(zhí)行以下命令：

npm install

  • 下載并安裝

然后，重啟 Atom 編輯器，就能在 packages 里看到剛才安裝的 markdown-image-paste 這個(gè)插件了。不過(guò)這么安裝，發(fā)現(xiàn)一個(gè)問(wèn)題，就是點(diǎn)擊 Disable 那個(gè)按鈕沒(méi)有反應(yīng)，也沒(méi)有 Settings 選項(xiàng)：

  • disable按鈕沒(méi)有反應(yīng)

八、其它有用插件

  • simplified-chinese-menu 插件： Atom 中文插件，可以使 Atom 菜單文字為中文顯示。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容