ZennにGithub連携で簡単に画像をアップロードする方法

この記事を読んで何が分かるか。

Github連携で、エディタソフト(VSCode)からZennに画像を表示する方法

• 画像ファイルを指定して表示する方法
• クリップボードにコピーされたスクショを、Zennへ表示するやり方

画像ファイルを指定する方法

画像管理がしやすいように、/images/記事名ディレクトリに配置します。
(ディレクトリ名だけでは何の記事か分からないのが難点)

.
├── articles
├── books
└── images
    └── 6ba25725845052
        └── na.png

こんな感じ

スクリーンショットを簡単に貼り付ける方法

1. スクリーンショットをクリップボードにコピーします

# Windowsユーザー
Windows + Shift + S

# Macユーザー
Command + Control + Shift + 4

2. Markdown ファイル内で、スクリーンショットを貼り付け

# Windowsユーザー
Ctrl + V

# Macユーザー
Command + V

3. 貼り付けると以下のように記載され、
   画像ファイルが articles ディレクトリへ自動的に作成される
   複数作成した場合 image-1.png image-2.png

![alt text](image.png)

4. VSCode の画面にて、image.png を D&D で images ディレクトリに配置
   VSCode 内で完結できるのが最強〜！
   

5. Markdown ファイル内の、パスを書き換えて終わり！！

貼り付けた時に、記述してくれるのが良いんですよね。

ここで、僕のアイコンの宣伝を...
友人が描いてくれた僕のアイコンです。（かわいいですよね