教你用Atom轻松编辑网页

作者: Emily的生活部落格 | 来源:发表于2017-09-30 11:23 被阅读254次

与 Atom 的相遇是机缘也是巧合。起初，我在简书上写作，发现可以切换成 markdown 的形式编辑。尽管我对 markdown 一无所知，但是凭借用 latex 的基础，知道 markdown 也是一种轻量级的文本编辑器，上手并不难，可以边查边用，同时这类编辑器的好处是能实时查看，同时无需过多考虑排版等问题。于是，我就入了 markdown 的坑。但是每每要更新博客时，都要打开简书或其他 markdown 在线编辑器，然后再将写好的文本转换成 HTML 让我感觉工作并不轻松，我一直试图寻找一款好用的 markdown 编辑器来编辑网页，直到一个偶然的机会，我发现了 Atom, 从打开官网看到可爱萌图的一刻起，心中便萌生出一种下载的冲动，后来又发现它还有许多“黑暗插件”，这让我最终确定把它当作我的 markdown 编辑器。

Atom 下载地址：https://atom.io/

官网

打开 atom 一种简约画风扑面而来，正是我的菜。
下面再来推荐几个能让编辑工作变得轻松的必备插件。

markdown-preview-plus
- markdown-preview-plus 为一款提供实时预览功能的插件，在 Setting->install 下，先 disable 已安装的 markdown-preview,再进行安装。快捷键：Ctrl + Shift + M。
  
  安装插件
markdown-img-paste 或 markdown-image-paste
- 这两款插件都能提供图片快速加载的功能，让我们来看下它们的使用介绍。
  - markdown-img-paste 自动将图片保存入 .md 文件夹下的子文件夹 assets 下，方便应用于使用七牛作图床的情况。快捷键：Ctrl + Shift + V。
  - markdown-image-paste 自动将图片保存入 .md 文件夹下或自定义的文件夹下。快捷键：Ctrl + V。
    
    要锻炼阅读文档的能力
  注意：请在markdown或rst文档中使用！Ctrl + V 前请先为图片命名。
  - 图片存储在本地文件夹下，之后需上传至服务器，才能在网页中正确显示出来，这种方法很占用空间，因此我选择用 github 作在线图床存储图片。举个例子，如果我们想将 markdown 文件夹下用于存储文章所用图片的文件夹 Img4A1-A4上传至github,我们需要经过下列步骤。
    - 建立与 github 的联系。在 markdown 文件夹下进行 git init，然后打开 git bash。键入的内容请参考我之前介绍 git 与 github 使用方法的文章。
    - 把该文件夹下全部内容上传至 github
      
      上传成功
    - 修改图片地址。将 blob 改为 raw 插入至 markdown 插入图片语法中。
markdown-scroll-system
- markdown-scroll-system 提供同步滚动查看的功能，可以在预览界面下准确找到光标所在位置，方便查看修改后效果。
pandoc-convert
- pandoc-convert 是一款用于格式转换的插件，我用它将写好的 markdown 文档转换成 HTML, 再做后续加工，省去了在网上找在线转换器的时间。快捷键：Ctrl + Shift + P 打开命令行。