LoginSignup
4
5

More than 5 years have passed since last update.

github issue がエラー全文載せなどで長くなって読みづらくなる時は<details>タグが便利

Last updated at Posted at 2017-09-30

github の issue 機能は便利ですが、一つの issue の文字数が多くなると、大事な情報を見落としてしまいがちです。特にエラーやバグの issue を立てる際に、エラーの全文を載せたり、画像を何枚も貼って行く読みづらくなっていくと思います。

HTML タグの <details> を使って、表示データを隠す

github issue 内では、HTML のタグを利用することもできます。github で使える html タグ一覧
以下のように書くことで、<details> 内の項目は <summary> の文言をクリックしない限り表示されません。(<summary><details>を展開する前に表示される文言)

<details>
<summary>エラー内容</summary>
とても長いエラー内容
とても長いエラー内容
とても長いエラー内容
...
</details>

デモ: qiita のマークアップでも <details> を利用してみる

(*Internet Explorer などでは動かない可能性があります 追記: コメント欄で報告をいただきましたが Windows8.1+IE11 では動かないようです。)


エラー内容
とても長いエラー内容
とても長いエラー内容
とても長いエラー内容
...

エラー内容 をクリックすると展開されます。

注意

<details> 要素を使えるブラウザーが限られており、Internet Explorer や Edge では表示そのものが消えてしまう可能性があるので注意が必要です(自分の環境で試せてないので真偽は不明です。誰か検証していただけると 追記: コメント欄で報告いただきましたが、消えるのではなく、最初から表示されているようです。)。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

利用できるブラウザでは以下の gif 画像のように表示されます。(IEなどで見れない方向け)
record6.gif

補足

すでに qiita の Markdown記法 チートシート の項目にも<details>について書かれていますが、最近この機能を知って便利だったので、啓蒙活動的な意味合いも込めて投稿した次第です。

4
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5