静的サイトジェネレータ用のサイトにAtomでいい感じに画像を挿入したい

JekyllやHugoでブログを書くときにAtomを使って書いているんですが、画像の貼り付けが面倒くさい。

例えばHugoの場合だと、

1. static フォルダ配下に画像を格納
2. 画像の名前をコピー
3. エディタに画像のパスを書き込む

特に1.が面倒で、なんかぱっと画像をペーストしたら、static/images 配下とかに保存されて、そんでエディタには /images/画像名.png とかが勝手に挿入されないかなーと思っていた。

ので作りました。

atom.io/packages/insert-image-to-atom-project

jsonで設定ファイルを書くことで、プロジェクトごとに保存先などを管理できます

.image-config.json

{
  "images": {
    "storePath": "/images",
    "wwwRoot": "/static",
  }
}

storePath に/static を入れることによって、画像が/static/imagesに保存され、貼り付けられるurlは/static/images/hogehoge になります。

Grammar毎に挿入するときの形式を指定できます

Hugoではimageを貼り付けるときに { {< figure src="/img/hoge.jpg" >} } のようなスニペットを入れたいですよね

.image-config.json

{
  "storePath": "/images",
  "wwwRoot": "/static",
  "grammars": {
    "Markdown": {
      "url": "{ {< figure src=\"${url}\" >} }"
    },
    "GitHub Markdown": {
      "url": "{ {< figure src=\"${url}\" >} }"
    },
    "HTML": {
      "url": "<img src=\"${url}\" alt=\"\">"
    }
  }
}

こんな風にしてみます。

はりつけると。

{ {< figure src="/images/b1ce5a71b477ae5b5e745842604575cd.png" >} }

こんなテキストがエディタに貼り付けられました。

grammarsを追加することで様々な言語に対応できるので、Railsのslimとかでも使えたりしますね。

atom.io/packages/insert-image-to-atom-project