[[balloonLeft]] | 日本語のアフィリエイトブログでよく見る、吹き出しのブロックを挿入できるようにした
[[balloonRight]] | どうやったの？
[[balloonLeft]] | このサイトは Gatsby で HTML を生成している。 | ブログの記事は Markdown ファイルで書いていて、そのパーサーにremark のプラグインを使っている。 | remark もプラグイン機構を持っていて、Markdown 記法を拡張して任意の HTML に変換できる
[[balloonLeftNoAvatar]] | 今回は吹き出しを挿入できるようにするにあたって、gatsby-remark-custom-blocksを利用した
[[balloonLeftNoAvatar]]
| 下記のような Markdown を、
| | [[balloon]] | gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する |
[[balloonLeftNoAvatar]]
| このような HTML に変換できる
| | [[balloonLeft]] | <div class="custom-block balloon"> | <div class="custom-block-body"> | <p>gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する</p> | </div> | </div> |
| あとは吹き出しっぽい見た目に体裁を整えただけ
[[balloonRight]] | なるほど、よさそう
[[balloonLeft]] | 完