吹き出しの体裁で段落を挿入できるようにした

2020/11/29

日本語のアフィリエイトブログでよく見る、吹き出しのブロックを挿入できるようにした

どうやったの？

このサイトは Gatsby で HTML を生成している。ブログの記事は Markdown ファイルで書いていて、そのパーサーにremark のプラグインを使っている。 remark もプラグイン機構を持っていて、Markdown 記法を拡張して任意の HTML に変換できる

今回は吹き出しを挿入できるようにするにあたって、gatsby-remark-custom-blocksを利用した

下記のような Markdown を、

[[balloon]]
gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する

このような HTML に変換できる

[[balloonLeft]]
<div class="custom-block balloon">
  <div class="custom-block-body">
    <p>gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する</p>
  </div>
</div>

あとは吹き出しっぽい見た目に体裁を整えただけ

なるほど、よさそう

完