我爱编程

05_Github编辑器Atom之：Markdown + Lat

2018-05-04  本文已影响0人  秋的懵懂

时间：2018-03-24 作者：魏文应

一、说明

Atom 这个软件是开源免费的，由业界良心 Github 推出，插件功能强大。我用过 Sublime 编辑器，相对来说 Atom 安装插件更方便，界面也很好看。目前我主要用 Atom 来做以下事情：

值得注意的是，目前（2018-09-12），微软收购了 Github 公司，微软 VScode 编辑器和 Atom 编辑器有很多相似的地方，后续看 Atom 如何升级维护也是一个问题。但如果你只是写 Markdown ，依然推荐你使用 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 禁用它：

接下来点击 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 ：

使用 Atom 打开这个文件，并编写 Markdown 文档（前提是你会 Markdown 语法）：

上面就是 Markdown 的显示效果，左边是 Markdown 原文，右边是显示效果。右边称为 预览，鼠标放在原文区域，同时按下 Shift + Ctrl + M 快捷键，就可以 打开预览窗口 了。

Markdown 生成 PDF 文档

Markdown 生成 PDF 比较简单，如果你安装了 markdown-pdf 插件，鼠标放在目标 Markdown 编辑区域，按下 Shift + Ctrl + C 快捷键即可，过一会就会在当前文件夹目录下生成 PDF 文件了。

Markdown 支持 Latex 公式

LaTex 公式是用于编写数学公式的，比如，Markdown 源文件中你这么写：

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

Markdown 就会显示这样：

S = \int_{a}^b f(x) \mathrm{d}x = 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 勾选上就可以了：

Markdown 粘贴图片

安装了 markdown-image-paste 插件，就可以使用 Ctrl + V 快捷键粘贴图片了。不过这个图片必须处于编辑状态，比如通过 QQ 截图，然后直接粘贴就可以：

截图后，直接 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

如果已经安装了 markdown-pdf，却不能使用，就先卸载 markdown-pdf，再安装 phantomjs，然后安装 markdown-pdf，就可以正常使用了。为什么要用 phantomjs 呢？ phantomjs 是一个 WebKit 浏览器引擎，有相应的 CSS 选择器，PDF 显示时，需要用到这个浏览器引擎。

七、离线安装 Atom 插件

因为国内有墙的存在，如果没有科学上网，那么，你很能在线安装不成功。这时候，你需要离线安装 Atom 插件。离线安装前，你需要安装下面两个软件：

下面，我以安装 markdown-image-paste 插件为例，演示如何离线安装插件。

下载离线包

我们要先找到这个插件的 Github 地址，然后从 Github 网站上下载这个插件。在 Atom 编辑器的 Install 中，搜索找到这个插件，点击它：

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

然后在 github 页面找到下载地址：

然后打开电脑的 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 选项：

八、其它有用插件

上一篇下一篇

猜你喜欢

热点阅读