在Markdown中自动插入图片的方法

在使用Markdown格式写文章时,总是需要在粘贴Markdown文档到平台的编辑器中后,再逐一将图片插入预先留下的位置,低效繁琐,容易出错。

今天找到了一个可以在Markdown中直接插入图片、无需手动逐个上传的方法。

原理

将所需图片上传至图床,生成图片外链,然后将图片以Markdown语句的形式插入文中的对应位置。

此时再将Markdown文本复制到平台编辑器时,就可以自动加载已经上传到网络上的图片,不需要再在本地文件和各种软件、网页之间频繁切换了,无疑可以节省大量时间。

局限性

经测试,微信公众平台不能直接拉取外链图片,需要借助第三方排版软件(如秀米)同步才行,而简书只支持系统自带Markdown格式,不支持自定义css模板渲染。

过程

工具:

  • Atom编辑器
  • markdown-preview-enhanced(Atom插件)
  • markdown-image-assistant(Atom插件)
  • Markdown here(浏览器插件)

方法:

  1. 下载并安装 Atom电脑;在浏览器中安装Markdown here插件
  2. 安装插件markdown-image-assistant
    在Atom界面中找到File-Settings-Install,在右侧搜索框中输入插件名称,点击Packages,在搜索结果中的相应插件上点击Install即可安装。可能会出现下载失败的的情况,多尝试几次基本都能成功。
  3. 安装插件markdown-preview-enhanced并做相应设置
    按与上一步相同的方法安装插件后,在插件中设置图片自动上传功能:
  • 打开插件的setting,在Image Uploader中选择sm.ms图床网站(免费网站,每次最多可上传10张单个大小在5MB以内的图片)
  • Drop image to editor中选择upload
  1. 在Markdown中插入图片
  • 在Atom中新建一个md文件
  • 直接将所需图片拖拽至输入区。你会发现文本中出现了一个显示正在上传的语句:

    稍后上传成功后,语句就会自动更新为含有图片外链的形式:

    将后面带有本地图片地址的语句删除,只留下含有图片外链地址的语句。这里也可以根据需要修改图片的输出尺寸。
  1. 将Markdown文本复制到发表平台的编辑器中,使用浏览器插件Markdown here转换即可直接得到带有图片的文章。

如果提示图片上传失败

原因可能是图片被重复上传或者网络不稳定,解决方法是在sm.ms官网上重新上传一遍图片,在网页上的提示中再获取一次图片外链。

其它方法

经过测试,在简书markdown书写模式中上传图片生成的链接也可以直接在其它网页引用,所以完全可以把简书当做一个图床来用,将图片上传至简书(markdown编辑模式),然后粘贴生成链接到需要的地方即可。

当然这样插入过程就需要手动完成,不过简书做为国内网站稳定性高,这个麻烦倒也值得。

简书链接测试: