🐙
Githubに貼る画像サイズを簡単にいい感じにしたい
はじめに
Githubに画像を添付するときデフォルトだと必要以上に大きく表示されてしまう。
<img>タグを使うことで幅を指定するのが良いが、毎回手作業でやるのはめんどい。
+ <img src="{画像URL}" width="50%" />
- 
画像を貼り付けたときの形式
Githubの更新で形式が変わる場合があるようですが、記事の更新地点では以下のような感じでした👀
pngとそれ以外で変わるようです。
pngの場合
<img width="1162" alt="SCR-20230502-nedr" src="https://github.com/Riscait/zenn-content/assets/90010509/b0a57ed6-06ac-45b3-9b43-41b5757658d6">
png以外の場合
拡張機能でReplace
Find & Replace for Text Editingを使うと正規表現で貼り付けた画像を見つけて、imgタグで囲った状態に置換できます
- 拡張機能をChromeに追加
- 以下のように設定
コピペ用
(?:<img.*"(http.*?)">)|(?:!\[.*\]\((https.*?)\))
コピペ用
<img src="$1$2" width="50%" />
- Replaceボタンで一括変換できる！
pngでもそうでなくても機能するようにした結果、正規表現が複雑です😅
もっといい正規表現があったらコメントで教えていただけると嬉しいです👍
Discussion
Githubに画像アップロードしたときの形式が変わって、この方法が使えなくなったみたいです
新形式ははじめからwidthがあるので、そこを50%等に書き換えれば良いです
後日記事修正します
更新済
「Find & Replace for Text Editing」の拡張機能がリンク切れになっており
検索にも出なくなっていました
追記: 12月26日、再確認したところアクセスできました
リンク変わったみたいなので記事更新しました 👍