教你用Atom轻松编辑网页

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

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

官网

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

1. markdown-preview-plus

   • markdown-preview-plus 为一款提供实时预览功能的插件，在 Setting->install 下，先 disable 已安装的 markdown-preview,再进行安装。快捷键：Ctrl + Shift + M。

     
     
     

     安装插件

2. 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 插入图片语法中。

         
         
         

3. markdown-scroll-system

   • markdown-scroll-system 提供同步滚动查看的功能，可以在预览界面下准确找到光标所在位置，方便查看修改后效果。

4. pandoc-convert

   • pandoc-convert 是一款用于格式转换的插件，我用它将写好的 markdown 文档转换成 HTML, 再做后续加工，省去了在网上找在线转换器的时间。快捷键：Ctrl + Shift + P 打开命令行。

以上就是我目前使用到的 Atom 功能，其实类似的插件有很多，大家可以多查找一下。除此之外，我还想写一点关于 master 与 branch 的思考。

• master 与 branch
  我们在建立仓库时，一般默认在主分支上工作，而 branch 的好处是适用于团队协作，好比不同人建立了branch A、B、C...，他们独自工作，最后将工作成果上传至各自的分支 branch 下，最后再进一步筛选合并至主分支中，这样可以大大提高工作效率。

更多内容请移步Emily个人网站：www.emiluo.com

参考资料：

1. http://www.infoq.com/cn/news/2011/03/git-adventures-branch-merge
2. https://stackoverflow.com/questions/19085807/please-enter-a-commit-message-to-explain-why-this-merge-is-necessary-especially
3. https://stackoverflow.com/questions/18328800/github-updates-were-rejected-because-the-remote-contains-work-that-you-do-not-h
4. https://stackoverflow.com/questions/25237959/updates-were-rejected-because-the-tip-of-your-current-branch-is-behind-hint-its
5. https://stackoverflow.com/questions/23401652/fatal-the-current-branch-master-has-no-upstream-branch
6. https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll
7. http://flight-manual.atom.io/getting-started/sections/atom-basics/