Githubのコメントで折り畳み内に画像を入れる方法

Web開発

皆さん、こんにちは!

いつも業務でGithubを使用しているのですが。

コメントの折り畳み要素内に画像をいれる必要がありまして。。

少しはまったので、その方法を共有しておきます!

折り畳みの記載方法

そもそも折り畳みとなにかというと。こんなものです。

折り畳みは、Githubのコメントでは以下で実装できます。

<details>
<summary>Test AAAA</summary>

これはテストです。
これはテストです。
これはテストです。
</details>

クリックすると内容が下に展開されます。

ここで注意点があるのですが。。

以下のようにsummaryの下に一行改行をいれないと、期待通りに出力してくれません。

<details>
<summary>Test AAAA</summary>
これはテストです。
これはテストです。
これはテストです。
</details>

このように改行しないようになります。改行なしを意図してやるならOKです。

これに、はまりました。。。

当初画像で試していたのですが、画像は折り畳みの要素に含むことができないのでは!?

と考えましたが、そんなとき以下の救世主に助けられました。感謝!

GitHubのMarkdownで折りたたみ記法の中身を整形させる方法
GitHubのMarkdownで折りたたみ記法の中身を整形させる方法. GitHub Gist: instantly share code, notes, and snippets.

※ちなみに上の一行改行をいれないパターンで画像だと、そのままの文字列で出力されます。

折り畳みに画像を含む

さてさて本題ですが。

折り畳みに画像を含むやり方は、以下のようにすると可能です。

単に画像リンクを一行あけていれるだけです!

<details>
<summary>Test AAAA</summary>

![image](https://user-images.githubusercontent.com/<image path>)
</details>

※補足

そもそも、なんでこれをやりたかったかというと。

スマートフォンのカメラからバーコードを読みとるアプリがあったのですが、、

そのアプリをテストするために、なにか効率のよい方法がないか。。

といろいろ考えた結果。

複数のバーコード画像をGithubのコメントに記載したほうが早いという考えに至りました。

かつ、コメント内にバーコード画像が縦に複数並んでいると誤って別のものを読み取ってしまう可能性がありました。

そこで、折り畳みを使用して使用しないものは閉じておくと、便利なので上のように折り畳みを使用しました。

参考

: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN
HTML の詳細折りたたみ要素 () は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。
https://gist.github.com/Phroneris/e7e6c869640b95bd42434bdc995cd4f695cd4f6
タイトルとURLをコピーしました