使用Atom撰写Markdown的几款插件推荐

markdown-preview

markdown-preview主页

安装markdown-preview插件后,通过快捷键ctrl-shift-m可以支持本地实时预览Markdown文件,目前支持这些格式.markdown, .md, .mdown, .mkd, .mkdown, .ron, 和 .txt

来看一张效果图

markdown-scroll-sync

markdown-scroll-sync主页

安装markdown-scroll-sync插件后,在使用markdown-preview进行预览的时候,左测markdown编辑框和右侧的html预览框可以进行同步的滚动。

来看一下效果图

atom-markdown-table-editor

atom-markdown-table-editor主页

用markdown来进行表格编辑貌似是最麻烦的事情,一款atom-markdown-table-editor插件可以轻松帮你解决这个问题。

一般的表格编辑软件都需要通过鼠标点击界面来进行表格编辑,这和markdown的初衷(纯文本编辑)相违背,而这款插件可以在纯文本的环境下,通过快捷键辅助编辑表格。

  1. 输入|+其他内容
    | foo_
    
  2. Tab
    | foo | _
    | --- |
    
  3. 继续打字
    | foo | bar | _
    | --- | --- |
    
  4. Enter
    | foo | bar |
    | --- | --- |
    | _   |     |
    
  5. 继续打字
    | foo | bar |
    | --- | --- |
    | baz | _   |
    
  6. Esc结束编辑
    | foo | bar |
    | --- | --- |
    | baz |     |
    _
    

来看一下效果图

atom-markclip

atom-markclip主页

如果说表格是markdown第一大难题,那么本地图片无疑是第二大难题,直到安装了atom-markclip插件。

首先拷贝图片到剪贴板,然后在markdown文件里面按cmd-v(Mac) 或者 ctrl-v(Windows),图片就会自动保存到本地,并且在markdown里面自动添加对本地图片的引用。

并且支持多种图片引用方式:

1. base64

会使用base64方式编码图片,直接插入到markdown文本中,不需要额外存储图片文件

![](data:image/png;base64,...)

2. file

在markdown文件同级目录创建一个文件,文件名为md5

path
├── markdown-file-name.md
├── image-md5-name.png
└── ...

并且自动添加引用

![](image-md5-name.png)

3. file in folder

在markdown文件同级目录创建一个同名目录,文件保存到这个目录下面,文件名为md5

path
├── markdown-file-name.md
├── markdown-file-name
│   ├── image-md5-name.png
│   └── ...
└── ...

并且自动添加引用

![](markdown-file-name/image-md5-name.png)

4. default folder

可以设置一个默认的文件夹

5. custom file

每次会跳出对话框,需要手动指定目录文件名

我个人配置了使用custom file的方式,因为我希望文件名有意义,自动生成的md5后续很难维护,虽然每次都需要手动输入文件名。

Written on August 2, 2019