path: root/build/blog/atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://yasutakeyohei.com/docs/blog</id>
    <title>東京都小平市議・安竹洋平のまとめ Blog</title>
    <updated>2024-03-23T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://yasutakeyohei.com/docs/blog"/>
    <subtitle>東京都小平市議・安竹洋平のまとめ Blog</subtitle>
    <icon>https://yasutakeyohei.com/docs/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[小平市立合気公園・開園セレモニー]]></title>
        <id>https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony</id>
        <link href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony"/>
        <updated>2024-03-23T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[小平市上水南町二丁目の佐川幸義邸跡地に新設された合気公園の開園セレモニーに参加しました]]></summary>
        <content type="html"><![CDATA[<p>小平市上水南町二丁目の佐川幸義邸跡地に新設された小平市立合気公園がついに開園しました！</p>
<p>令和6年3月23日（土）午前10時から現地で行われた開園セレモニーに参加しましたので、写真と動画で様子をお知らせします。</p>
<!-- -->
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="これまでの経緯">これまでの経緯<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AE%E7%B5%8C%E7%B7%AF" class="hash-link" aria-label="これまでの経緯 への直接リンク" title="これまでの経緯 への直接リンク">​</a></h2>
<p>合気公園に関してこれまでの経緯はこちら↓にまとめています。</p>
<ul>
<li><a href="https://sagawa-aiki-park.com/keii-2/" target="_blank" rel="noopener noreferrer">旧佐川邸の公園化を考える会・これまでの経緯（2）</a></li>
<li><a href="https://yasutakeyohei.com/books/reiwa3/20210219_teireikai/seigan-5.html" target="_blank" rel="noopener noreferrer">請願第5号　旧佐川邸の土地を売らないことも含め、市民の意見を聞きながら公園整備を行うことについて</a></li>
<li><a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou">（令和6年1月31日の様子）小平市上水南町二丁目の佐川幸義邸跡地に新設される合気公園の整備進捗状況を見てきました</a></li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="セレモニーの様子">セレモニーの様子<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E3%82%BB%E3%83%AC%E3%83%A2%E3%83%8B%E3%83%BC%E3%81%AE%E6%A7%98%E5%AD%90" class="hash-link" aria-label="セレモニーの様子 への直接リンク" title="セレモニーの様子 への直接リンク">​</a></h2>
<p>次のような次第で、約30分間行われました。</p>
<ol>
<li>開会の辞（水と緑と公園課長）</li>
<li>挨拶<!-- -->
<ol>
<li>市長</li>
<li>市議会議長</li>
<li>大東流合気佐門会理事長（木村達夫氏）</li>
</ol>
</li>
<li>除幕式<!-- -->
<ol>
<li>旧佐川邸公園の公園化考える会代表（岡江伸子氏）の挨拶</li>
<li>除幕</li>
</ol>
</li>
<li>閉会の辞（水と緑と公園課長）</li>
<li>注意事項（水と緑と公園課長）</li>
</ol>
<p>注意事項としては、</p>
<p><img decoding="async" loading="lazy" alt="挨拶の様子" src="https://yasutakeyohei.com/docs/assets/images/ceremony-yousu-81cbd8918632d33b922b3a75335c8fcd.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->↑沢山の方が参加されました。</p>
<p><img decoding="async" loading="lazy" alt="除幕直前" src="https://yasutakeyohei.com/docs/assets/images/kensyouhi-jomaku-1-0764be06bd27039672ee1ffedb9a3a52.jpg" width="594" height="374" class="img_ev3q"></p>
<p><img decoding="async" loading="lazy" alt="除幕直後" src="https://yasutakeyohei.com/docs/assets/images/kensyouhi-jomaku-2-bb2820bb69f6856cd72e237e18b88925.jpg" width="602" height="363" class="img_ev3q"><br>
<!-- -->↑市長、市議会議長、木村氏、岡江氏により、顕彰碑の除幕が行われました。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="式次第小平市">式次第（小平市）<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%BC%8F%E6%AC%A1%E7%AC%AC%E5%B0%8F%E5%B9%B3%E5%B8%82" class="hash-link" aria-label="式次第（小平市） への直接リンク" title="式次第（小平市） への直接リンク">​</a></h3>
<iframe src="/docs/assets/files/R6_0323_kodairashiritu-aikikouen-sagawa-yukuyoshi-tei-atochi-kaien-ceremony-shidai-552ecdbb4551386e376f07dd38ddee65.pdf#toolbar=1&amp;navpanes=0" class="tukokusyo"></iframe>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="そのほかの写真">そのほかの写真<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E3%81%9D%E3%81%AE%E3%81%BB%E3%81%8B%E3%81%AE%E5%86%99%E7%9C%9F" class="hash-link" aria-label="そのほかの写真 への直接リンク" title="そのほかの写真 への直接リンク">​</a></h2>
<p>以下の写真と動画はセレモニー直後と3月28日（木）に撮影したものです。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="出入口">出入口<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%87%BA%E5%85%A5%E5%8F%A3" class="hash-link" aria-label="出入口 への直接リンク" title="出入口 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="正面出入口" src="https://yasutakeyohei.com/docs/assets/images/syoumen-deiriguchi-993c6da7f0a6e8d5a702aac0ae706c54.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->正面出入口</p>
<p><img decoding="async" loading="lazy" alt="北東側出入口" src="https://yasutakeyohei.com/docs/assets/images/hokutou-deiriguchi-0d7771b6e57c6bece71eee8bfd756597.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->北東側出入口</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="園名碑">園名碑<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%9C%92%E5%90%8D%E7%A2%91" class="hash-link" aria-label="園名碑 への直接リンク" title="園名碑 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園・園名碑" src="https://yasutakeyohei.com/docs/assets/images/aiki-kouen-enmeihi-7b7eec9fb461601989a0c301d08ad1fe.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->道場に使われていた屋根瓦（鬼瓦）の一部が埋め込まれています。道場関係の方によるデザインです。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="顕彰碑">顕彰碑<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E9%A1%95%E5%BD%B0%E7%A2%91" class="hash-link" aria-label="顕彰碑 への直接リンク" title="顕彰碑 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園・顕彰碑" src="https://yasutakeyohei.com/docs/assets/images/kensyouhi-17d2c18b534643c6cbedfcf309723e9f.jpg" width="600" height="800" class="img_ev3q"></p>
<p><img decoding="async" loading="lazy" alt="合気公園・顕彰碑詳細" src="https://yasutakeyohei.com/docs/assets/images/kensyouhi-syousai-96cfd8ecd49a56680cf6e36dd22cb6fd.jpg" width="600" height="797" class="img_ev3q"></p>
<blockquote>
<p>合気柔術は それ以前の柔術や柔道とは全く別系統の柔術で 武田忽角先生によって初めて世に知られるようになった</p>
<p>佐川幸義先生は 明治三十五年北海道の湧別に生まれ 十歳より 武田先生から大東流合気柔術を習い 三十歳代には武田先生と二人で各地を教えて廻った</p>
<p>昭和三十年 小平市のこの場所に正伝大東流合気武術総本部道場（佐川道場）を開いた</p>
<p>平成十年に九十五歳で逝去する前日までこの佐川道場で合気を発展させ続け前人未到の境地に達し人間が年齢を乗り越える可能性を体現した</p>
<p>道場訓冒頭<br>
<!-- -->合氣は氣を合わす事である<br>
<!-- -->宇宙天地神羅萬象の総ては融和調和に依て<br>
<!-- -->円満に滞り無く動じて居るのである<br>
<!-- -->その調和が合氣なのである</p>
</blockquote>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="日本庭園">日本庭園<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E6%97%A5%E6%9C%AC%E5%BA%AD%E5%9C%92" class="hash-link" aria-label="日本庭園 への直接リンク" title="日本庭園 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="日本庭園（１）" src="https://yasutakeyohei.com/docs/assets/images/nihon-teien-1-cf8387f8e1a4e17848064b53b8b29418.jpg" width="800" height="600" class="img_ev3q"></p>
<p><img decoding="async" loading="lazy" alt="日本庭園（２）" src="https://yasutakeyohei.com/docs/assets/images/nihon-teien-2-642c0d47f2360e012602791367e3bfba.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->早くも子ども達が石に上って遊んでいました😍</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="道場跡地横にあるベンチ">道場跡地横にあるベンチ<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E9%81%93%E5%A0%B4%E8%B7%A1%E5%9C%B0%E6%A8%AA%E3%81%AB%E3%81%82%E3%82%8B%E3%83%99%E3%83%B3%E3%83%81" class="hash-link" aria-label="道場跡地横にあるベンチ への直接リンク" title="道場跡地横にあるベンチ への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="道場跡地横にあるベンチ" src="https://yasutakeyohei.com/docs/assets/images/bench-19b176fdab1dce41a21a77fd28930c57.jpg" width="600" height="800" class="img_ev3q"><br>
<!-- -->緑色に舗装された部分が道場跡地です。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="テーブル">テーブル<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB" class="hash-link" aria-label="テーブル への直接リンク" title="テーブル への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="ベンチとテーブル" src="https://yasutakeyohei.com/docs/assets/images/bench-table-5376fa2f30e91288351c9d2398d657c9.jpg" width="600" height="800" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="パーゴラとベンチ">パーゴラとベンチ<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E3%83%91%E3%83%BC%E3%82%B4%E3%83%A9%EF%BF%BD%EF%BF%BD%E3%81%A8%E3%83%99%E3%83%B3%E3%83%81" class="hash-link" aria-label="パーゴラとベンチ への直接リンク" title="パーゴラとベンチ への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="パーゴラとベンチ" src="https://yasutakeyohei.com/docs/assets/images/pergola-bench-6bad09d18fc0f86074227af9f10ec229.jpg" width="1976" height="1052" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="水飲み">水飲み<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E6%B0%B4%E9%A3%B2%E3%81%BF" class="hash-link" aria-label="水飲み への直接リンク" title="水飲み への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="水飲み" src="https://yasutakeyohei.com/docs/assets/images/mizunomi-6861b2b943081670f6dda518b9987a97.jpg" width="800" height="600" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="南西出入口への通路">南西出入口への通路<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%8D%97%E8%A5%BF%E5%87%BA%E5%85%A5%E5%8F%A3%E3%81%B8%E3%81%AE%E9%80%9A%E8%B7%AF" class="hash-link" aria-label="南西出入口への通路 への直接リンク" title="南西出入口への通路 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="南西出入口への通路" src="https://yasutakeyohei.com/docs/assets/images/nansei-tuuro-f07e1f02537a2968c3e2a0525860c041.jpg" width="800" height="1067" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="看板">看板<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E7%9C%8B%E6%9D%BF" class="hash-link" aria-label="看板 への直接リンク" title="看板 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="公園の立て看板" src="https://yasutakeyohei.com/docs/assets/images/kanban-e593b20cd1889c5c83b5b2d98e3fa6e0.jpg" width="721" height="573" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="売却予定地">売却予定地<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%A3%B2%E5%8D%B4%E4%BA%88%E5%AE%9A%E5%9C%B0" class="hash-link" aria-label="売却予定地 への直接リンク" title="売却予定地 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="売却予定地" src="https://yasutakeyohei.com/docs/assets/images/urichi-ec052ff93ee9dcc44c923248d5cdea65.jpg" width="800" height="600" class="img_ev3q"><br>
<!-- -->残念ながら佐川氏やふるさと納税で多額のご寄附をいただいてもなお整備費用として約2千万円が不足しているため売却されてしまう部分です。
これだけの土地や金銭を寄附してもらっているので、最後は市に整備費用を出してもらいたかったところで、とても残念です。令和6年度中に売却予定です。
路線価と公園の隣という環境からして、2千万円どころではないかなりの金額になると思われます。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="動画">動画<a href="https://yasutakeyohei.com/docs/blog/2024/03/23/aiki-kouen-opening-ceremony#%E5%8B%95%E7%94%BB" class="hash-link" aria-label="動画 への直接リンク" title="動画 への直接リンク">​</a></h2>
<video controls="" preload="none" width="100%" poster="/docs/assets/images/aikikouen-1-154c6f136bc510d317d2e375025d5451.jpg"><source src="https://nc.yasutakeyohei.com/index.php/s/Sn6aBrAgRx9ZgA6/download" type="video/mp4"></video>
<video controls="" preload="none" width="100%" poster="/docs/assets/images/aikikouen-2-af9445495f6c716463bf8a285ad4f5e7.jpg"><source src="https://nc.yasutakeyohei.com/index.php/s/6Y9qRFkZ2ncPt5p/download" type="video/mp4"></video>]]></content>
        <author>
            <name>安竹 洋平</name>
            <email>yohei@yasutakeyohei.com</email>
            <uri>https://yasutakeyohei.com</uri>
        </author>
        <category label="合気公園" term="合気公園"/>
        <category label="佐川幸義氏" term="佐川幸義氏"/>
        <category label="公園" term="公園"/>
        <category label="まちづくり" term="まちづくり"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[合気公園の整備進捗状況]]></title>
        <id>https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou</id>
        <link href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou"/>
        <updated>2024-01-31T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[小平市上水南町二丁目の佐川幸義邸跡地に新設される合気公園の整備進捗状況を見てきました]]></summary>
        <content type="html"><![CDATA[<p>小平市上水南町二丁目の佐川幸義邸跡地に新設される合気公園の整備状況を見てきましたので、写真と動画で現在の様子をお知らせします。</p>
<p>順調に進んでいるようですね😊</p>
<!-- -->
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="これまでの経緯">これまでの経緯<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AE%E7%B5%8C%E7%B7%AF" class="hash-link" aria-label="これまでの経緯 への直接リンク" title="これまでの経緯 への直接リンク">​</a></h2>
<p>合気公園に関してこれまでの経緯はこちら↓にまとめています。</p>
<ul>
<li><a href="https://sagawa-aiki-park.com/keii-2/" target="_blank" rel="noopener noreferrer">旧佐川邸の公園化を考える会・これまでの経緯（2）</a></li>
<li><a href="https://yasutakeyohei.com/books/reiwa3/20210219_teireikai/seigan-5.html" target="_blank" rel="noopener noreferrer">請願第5号　旧佐川邸の土地を売らないことも含め、市民の意見を聞きながら公園整備を行うことについて</a></li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="市民による公園整備案">市民による公園整備案<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%B8%82%E6%B0%91%E3%81%AB%E3%82%88%E3%82%8B%E5%85%AC%E5%9C%92%E6%95%B4%E5%82%99%E6%A1%88" class="hash-link" aria-label="市民による公園整備案 への直接リンク" title="市民による公園整備案 への直接リンク">​</a></h3>
<p>旧佐川邸の公園化を考える会が市に提出した公園計画案はこちら↓（<a href="https://sagawa-aiki-park.com/about-landscape-designer-suzuki-ryou/" target="_blank" rel="noopener noreferrer">ランドスケープデザイナー・鈴木綾氏</a>による）</p>
<p><img decoding="async" loading="lazy" alt="旧佐川邸の公園化を考える会が市に提出した合気公園計画案" src="https://yasutakeyohei.com/docs/assets/images/aiki-kouen-simin-plan-48b76a337e6c5dfd8943e884a2f9f048.jpg" width="1147" height="796" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="市の整備イメージ案">市の整備イメージ案<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%B8%82%E3%81%AE%E6%95%B4%E5%82%99%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E6%A1%88" class="hash-link" aria-label="市の整備イメージ案 への直接リンク" title="市の整備イメージ案 への直接リンク">​</a></h3>
<p>上記の提案を受けて市が令和5年5月に提示した整備イメージ案がこちら↓</p>
<p><img decoding="async" loading="lazy" alt="市民による計画案を受けて小平市水と緑と公園課が提示した合気公園整備イメージ案" src="https://yasutakeyohei.com/docs/assets/images/aiki-kouen-si-plan-129ef71b08ef22635cbf3182bd928a02.png" width="1110" height="918" class="img_ev3q"></p>
<p>この整備イメージに基づいて整備が進んでいます。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="写真">写真<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%86%99%E7%9C%9F" class="hash-link" aria-label="写真 への直接リンク" title="写真 への直接リンク">​</a></h2>
<p>以下の写真と動画は令和6年1月30日（火）に撮影したものです。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="お知らせ">お知らせ<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B" class="hash-link" aria-label="お知らせ への直接リンク" title="お知らせ への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・お知らせ" src="https://yasutakeyohei.com/docs/assets/images/IMG_1825-64c4b9866c80fe0abbb0bf2e1fe1ebb9.jpg" width="551" height="542" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="野外卓顕彰碑背なしベンチ">野外卓・顕彰碑・背なしベンチ<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E9%87%8E%E5%A4%96%E5%8D%93%E9%A1%95%E5%BD%B0%E7%A2%91%E8%83%8C%E3%81%AA%E3%81%97%E3%83%99%E3%83%B3%E3%83%81" class="hash-link" aria-label="野外卓・顕彰碑・背なしベンチ への直接リンク" title="野外卓・顕彰碑・背なしベンチ への直接リンク">​</a></h3>
<p>養生されている？道場跡の部分が見えます。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・野外卓・顕彰碑・背なしベンチ" src="https://yasutakeyohei.com/docs/assets/images/IMG_1833-b7ef33a610457fe1d526461184a41f08.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="パーゴラ顕彰碑">パーゴラ・顕彰碑<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E3%83%91%E3%83%BC%E3%82%B4%E3%83%A9%E9%A1%95%E5%BD%B0%E7%A2%91" class="hash-link" aria-label="パーゴラ・顕彰碑 への直接リンク" title="パーゴラ・顕彰碑 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・パーゴラ・顕彰碑" src="https://yasutakeyohei.com/docs/assets/images/IMG_1835-cfa4076eb29b2b8cc0d8874943d80d73.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="メッシュフェンスブロック">メッシュフェンス・ブロック<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5%E3%83%95%E3%82%A7%E3%83%B3%E3%82%B9%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF" class="hash-link" aria-label="メッシュフェンス・ブロック への直接リンク" title="メッシュフェンス・ブロック への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・メッシュフェンス・ブロック" src="https://yasutakeyohei.com/docs/assets/images/IMG_1837-f48b1fddbced472efa9120b6cc806bca.jpg" width="806" height="288" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="水飲み場東側出入口">水飲み場・東側出入口<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E6%B0%B4%E9%A3%B2%E3%81%BF%E5%A0%B4%E6%9D%B1%E5%81%B4%E5%87%BA%E5%85%A5%E5%8F%A3" class="hash-link" aria-label="水飲み場・東側出入口 への直接リンク" title="水飲み場・東側出入口 への直接リンク">​</a></h3>
<p>園名碑が少し写っています。トラックが止まっていて撮影できませんでした。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="水飲み場東側出入口-1">水飲み場・東側出入口<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E6%B0%B4%E9%A3%B2%E3%81%BF%E5%A0%B4%E6%9D%B1%E5%81%B4%E5%87%BA%E5%85%A5%E5%8F%A3-1" class="hash-link" aria-label="水飲み場・東側出入口 への直接リンク" title="水飲み場・東側出入口 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・水飲み場・東側出入口" src="https://yasutakeyohei.com/docs/assets/images/IMG_1839-ce33aef4d309c62629b14da7375ae8b0.jpg" width="806" height="510" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="庭園付近">庭園付近<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%BA%AD%E5%9C%92%E4%BB%98%E8%BF%91" class="hash-link" aria-label="庭園付近 への直接リンク" title="庭園付近 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・庭園付近" src="https://yasutakeyohei.com/docs/assets/images/IMG_1840-0f3db6ae991c0f078f20fee60b8c3af1.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="西側出入口への道目隠しフェンス">西側出入口への道・目隠しフェンス<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E8%A5%BF%E5%81%B4%E5%87%BA%E5%85%A5%E5%8F%A3%E3%81%B8%E3%81%AE%E9%81%93%E7%9B%AE%E9%9A%A0%E3%81%97%E3%83%95%E3%82%A7%E3%83%B3%E3%82%B9" class="hash-link" aria-label="西側出入口への道・目隠しフェンス への直接リンク" title="西側出入口への道・目隠しフェンス への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・西側出入口への道・目隠しフェンス" src="https://yasutakeyohei.com/docs/assets/images/IMG_1841-1213113daa3a84ea4ec1891433cef4d4.jpg" width="605" height="806" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="南東の角">南東の角<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%8D%97%E6%9D%B1%E3%81%AE%E8%A7%92" class="hash-link" aria-label="南東の角 への直接リンク" title="南東の角 への直接リンク">​</a></h3>
<p>道路が拡幅されていることが分かります。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・南東の角" src="https://yasutakeyohei.com/docs/assets/images/IMG_1843-131de4b3c2c08bd035543f280d14c33d.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="庭園">庭園<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%BA%AD%E5%9C%92" class="hash-link" aria-label="庭園 への直接リンク" title="庭園 への直接リンク">​</a></h3>
<p>このあたりは今後手が入るのかもですね。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・園庭" src="https://yasutakeyohei.com/docs/assets/images/IMG_1846-0fd9cb08e1b567000985b81091583cfa.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="売却予定地">売却予定地<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%A3%B2%E5%8D%B4%E4%BA%88%E5%AE%9A%E5%9C%B0" class="hash-link" aria-label="売却予定地 への直接リンク" title="売却予定地 への直接リンク">​</a></h3>
<p>奥の砂が盛ってあるところが売却予定地です。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・売却予定地（奥の砂が盛ってあるところ）" src="https://yasutakeyohei.com/docs/assets/images/IMG_1848-43e902c9da25fe7057d637033947e3c4.jpg" width="806" height="399" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="拡幅された東側道路">拡幅された東側道路<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E6%8B%A1%E5%B9%85%E3%81%95%E3%82%8C%E3%81%9F%E6%9D%B1%E5%81%B4%E9%81%93%E8%B7%AF" class="hash-link" aria-label="拡幅された東側道路 への直接リンク" title="拡幅された東側道路 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・拡幅された東側道路" src="https://yasutakeyohei.com/docs/assets/images/IMG_1851-f078dce1352d522d9e6afa2735f029ae.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="道路拡幅は売却予定地前まで">道路拡幅は売却予定地前まで<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E9%81%93%E8%B7%AF%E6%8B%A1%E5%B9%85%E3%81%AF%E5%A3%B2%E5%8D%B4%E4%BA%88%E5%AE%9A%E5%9C%B0%E5%89%8D%E3%81%BE%E3%81%A7" class="hash-link" aria-label="道路拡幅は売却予定地前まで への直接リンク" title="道路拡幅は売却予定地前まで への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・道路拡幅は売却予定地前まで" src="https://yasutakeyohei.com/docs/assets/images/IMG_1852-dd9afeb80c05b28d253a05229a12650e.jpg" width="806" height="426" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="佐川氏が四股を踏んでいたとされる石">佐川氏が四股を踏んでいたとされる石<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E4%BD%90%E5%B7%9D%E6%B0%8F%E3%81%8C%E5%9B%9B%E8%82%A1%E3%82%92%E8%B8%8F%E3%82%93%E3%81%A7%E3%81%84%E3%81%9F%E3%81%A8%E3%81%95%E3%82%8C%E3%82%8B%E7%9F%B3" class="hash-link" aria-label="佐川氏が四股を踏んでいたとされる石 への直接リンク" title="佐川氏が四股を踏んでいたとされる石 への直接リンク">​</a></h3>
<p>右下の平らな石が佐川幸義氏が四股を踏んでいたとされる石です。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・四股を踏んでいたと思われる石" src="https://yasutakeyohei.com/docs/assets/images/IMG_1853-148e683f38a81ae796e46e2128dcf13d.jpg" width="806" height="605" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="西側出入口">西側出入口<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E8%A5%BF%E5%81%B4%E5%87%BA%E5%85%A5%E5%8F%A3" class="hash-link" aria-label="西側出入口 への直接リンク" title="西側出入口 への直接リンク">​</a></h3>
<p>案内板はまだ設置されていません。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・西側出入口" src="https://yasutakeyohei.com/docs/assets/images/IMG_1854-4dded2a7e4a1145d24e950330c1b5df5.jpg" width="806" height="545" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="西側園路と目隠しフェンス">西側園路と目隠しフェンス<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E8%A5%BF%E5%81%B4%E5%9C%92%E8%B7%AF%E3%81%A8%E7%9B%AE%E9%9A%A0%E3%81%97%E3%83%95%E3%82%A7%E3%83%B3%E3%82%B9" class="hash-link" aria-label="西側園路と目隠しフェンス への直接リンク" title="西側園路と目隠しフェンス への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・西側園路と目隠しフェンス" src="https://yasutakeyohei.com/docs/assets/images/IMG_1855-fd4fdcc03efce5e08b84ab074160246f.jpg" width="605" height="806" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="西側の工事看板目隠しフェンス上部">西側の工事看板・目隠しフェンス上部<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E8%A5%BF%E5%81%B4%E3%81%AE%E5%B7%A5%E4%BA%8B%E7%9C%8B%E6%9D%BF%E7%9B%AE%E9%9A%A0%E3%81%97%E3%83%95%E3%82%A7%E3%83%B3%E3%82%B9%E4%B8%8A%E9%83%A8" class="hash-link" aria-label="西側の工事看板・目隠しフェンス上部 への直接リンク" title="西側の工事看板・目隠しフェンス上部 への直接リンク">​</a></h3>
<p>目隠しフェンス上部は人が乗り越えられないような突起が出ています。</p>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・西側の工事看板・目隠しフェンス上部" src="https://yasutakeyohei.com/docs/assets/images/IMG_1856-d0146a7d69bb5e78cd0e66baa9c4a838.jpg" width="504" height="704" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="西側園路の舗装">西側園路の舗装<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E8%A5%BF%E5%81%B4%E5%9C%92%E8%B7%AF%E3%81%AE%E8%88%97%E8%A3%85" class="hash-link" aria-label="西側園路の舗装 への�直接リンク" title="西側園路の舗装 への直接リンク">​</a></h3>
<p><img decoding="async" loading="lazy" alt="合気公園整備中・西側園路の舗装" src="https://yasutakeyohei.com/docs/assets/images/IMG_1857-60cf5c630dd6c5ca0007dd430eb39cf3.jpg" width="605" height="806" class="img_ev3q"></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="動画">動画<a href="https://yasutakeyohei.com/docs/blog/2024/01/31/sagawa-aiki-kouen-seibi-joukyou#%E5%8B%95%E7%94%BB" class="hash-link" aria-label="動画 への直接リンク" title="動画 への直接リンク">​</a></h2>
<video controls="" preload="none" width="100%" poster="/docs/assets/images/IMG_1843-131de4b3c2c08bd035543f280d14c33d.jpg"><source src="https://nc.yasutakeyohei.com/index.php/s/kqE4MSbn8SbeiCy/download" type="video/mp4"></video>
<p>以上です。完成が楽しみですね。</p>]]></content>
        <author>
            <name>安竹 洋平</name>
            <email>yohei@yasutakeyohei.com</email>
            <uri>https://yasutakeyohei.com</uri>
        </author>
        <category label="合気公園" term="合気公園"/>
        <category label="佐川幸義氏" term="佐川幸義氏"/>
        <category label="公園" term="公園"/>
        <category label="まちづくり" term="まちづくり"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Docusaurusの注意書きや警告文のタイトルを見出しにして、目次にも乗せる方法]]></title>
        <id>https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc</id>
        <link href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc"/>
        <updated>2024-01-27T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Docusaurus（V3.1）では、注意書きや警告文（Admonition）は見出し（Heading）にはならず目次にも掲載されないので、Remark/RehypeのプラグインとSwizzleを活用して実現しました。]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithStickyNavbar_LWe7" id="docusaurus">Docusaurus🦖<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#docusaurus" class="hash-link" aria-label="Docusaurus🦖 への直接リンク" title="Docusaurus🦖 への直接リンク">​</a></h2>
<p>1ヵ月弱使いましたがこの<a href="https://docusaurus.io/" target="_blank" rel="noopener noreferrer">Docusaurus</a>（ドキュサウルス）は数あるCMSの中でも秀逸です。</p>
<p>文書作成と管理が容易で、拡張の自由度も非常に高く、完全なオープンソース。</p>
<p>議員活動に重要な「<strong>資料を作成しまとめて公開するツール</strong>」として現状の最適解と感じます。</p>
<!-- -->
<p>facebookが母体なので色々と気になるところですが、<a href="https://ja.legacy.reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>を初めとして有益なソフトウェアを完全なオープンソースとして提供してくれていることは純粋にありがたいと感じます。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="admonitionのタイトルが見出しにならない">Admonitionのタイトルが見出しにならない<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#admonition%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%8C%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84" class="hash-link" aria-label="Admonitionのタイトルが見出しにならない への直接リンク" title="Admonitionのタイトルが見出しにならない への直接リンク">​</a></h2>
<p>さてDocusaurusには<a href="https://docusaurus.io/docs/markdown-features/admonitions" target="_blank" rel="noopener noreferrer">Admonition</a>（注意書きや警告文）を容易にmarkdownで書く方法が用意されています。</p>
<p>例えばinfoなら、次のようにmarkdownで書けば、</p>
<div class="language-mdx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">Admonitionの記法（mdもしくはmdxに記載）</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-mdx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">:::info[infoの例]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">ここに文章を書く</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">:::</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>次のようにHTMLで表示されます。</p>
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>infoの例</div><div class="admonitionContent_UjKb"><p>ここに文章を書く</p></div></div>
<p>しかし（DocusaurusV3.1）でこのAdmonitionのタイトルは見出し（<a href="https://docusaurus.io/docs/markdown-features/toc" target="_blank" rel="noopener noreferrer">Heading</a>）にならず、目次（<a href="https://docusaurus.io/docs/markdown-features/toc" target="_blank" rel="noopener noreferrer">TOC</a>）にも乗りません。上記例なら「INFOの例」がTOCに表示されません。</p>
<p>次の図からも分かっていただけるかと思います。</p>
<p><img decoding="async" loading="lazy" alt="Admonitionのタイトルが見出しにならない" src="https://yasutakeyohei.com/docs/assets/images/admonition-no-toc-98d7dfb77b6d769fe6815f0fb702575d.png" width="903" height="820" class="img_ev3q"></p>
<p>些細なことのようにも思えますが、Docusaurusを書籍のように扱うには結構気になるところ。</p>
<p>なお<a href="https://github.com/elviswolcott/remark-admonitions/issues/26" target="_blank" rel="noopener noreferrer">以前はAdmonitionのタイトルはH5要素になっていた</a>ようですが、深さ（H1～H5のレベル）を決め打ちするのは好ましくないということから（？）、今はH5要素ではありません。</p>
<p>次のように本文中に見出しを書く方法もありますが</p>
<div class="language-mdx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">Admonitionの記法（mdもしくはmdxに記載）</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-mdx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">:::info</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">#### テスト</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">～文章～</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">:::</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>見た目がイマイチになります。</p>
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>備考</div><div class="admonitionContent_UjKb"><h4 class="anchor anchorWithStickyNavbar_LWe7" id="テスト">テスト<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%83%86%E3%82%B9%E3%83%88" class="hash-link" aria-label="テスト への直接リンク" title="テスト への直接リンク">​</a></h4><p>～文章～</p></div></div>
<p><a href="https://github.com/facebook/docusaurus/discussions/7146" target="_blank" rel="noopener noreferrer">ほかのユーザーからの要望</a>も上がっており、私も少し不便に感じていたので、次の仕様になるようカスタマイズしましたのでその方法を解説します。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="カスタマイズ後はどうなるか">カスタマイズ後はどうなるか<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E5%BE%8C%E3%81%AF%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8B%E3%81%8B" class="hash-link" aria-label="カスタマイズ後はどうなるか への直接リンク" title="カスタマイズ後はどうなるか への直接リンク">​</a></h2>
<p>後述のカスタマイズをすると、Admonitionのタイトル部に（通常の見出しmarkdownと同様に）<strong>#を冒頭に2個以上入れる</strong> ことで見出しになります。またTOCにも反映されます。#を2個以上としているのは、H1をAdmonitionには使わないはずのため。また#を入れない場合は見出しにならず、TOCにも反映されません。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="タイトル冒頭にを入れた場合">タイトル冒頭に#を入れた場合<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E5%86%92%E9%A0%AD%E3%81%AB%E3%82%92%E5%85%A5%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88" class="hash-link" aria-label="タイトル冒頭に#を入れた場合 への直接リンク" title="タイトル冒頭に#を入れた場合 への直接リンク">​</a></h3>
<div class="language-mdx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">Admonitionの記法（mdもしくはmdxに記載）</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-mdx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">:::info[#### 見出しになりTOCに反映されるタイトルの例]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">#が4つ分のためH4見出しになります。TOCにも反映されます。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">:::</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>↓</p>
<!-- -->
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><h4 id="見出しになりtocに反映されるタイトルの例" class="anchor title anchorWithStickyNavbar_LWe7">見出しになりTOCに反映されるタイトルの例</h4></div><div class="admonitionContent_UjKb"><p>#が4つ分のためH4見出しになります。TOCにも反映されます。</p></div></div>
<p>このブログでもTOCに表示されています。<br>
<!-- -->なおマウスカーソルを乗せた際にハッシュリンク（#）が表示されるようにするにはCSSの設定が必要です。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="タイトル冒頭にを入れない場合">タイトル冒頭に#を入れない場合<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E5%86%92%E9%A0%AD%E3%81%AB%E3%82%92%E5%85%A5%E3%82%8C%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88" class="hash-link" aria-label="タイトル冒頭に#を入れない場合 への直接リンク" title="タイトル冒頭に#を入れない場合 への直接リンク">​</a></h3>
<div class="language-mdx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">Admonitionの記法（mdもしくはmdxに記載）</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-mdx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">:::info[見出しにならずTOCに反映されないタイトルの例]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">#がないため見出しにならず、TOCにも反映されません。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">:::</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>↓</p>
<!-- -->
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><h4 id="見出しにならずtocに反映されないタイトルの例" class="anchor title anchorWithStickyNavbar_LWe7">見出しにならずTOCに反映されないタイトルの例</h4></div><div class="admonitionContent_UjKb"><p>#がないため見出しになりません。</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="タイトルにhtmlを入れることも可能">タイトルにHTMLを入れることも可能<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%ABhtml%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E5%8F%AF%E8%83%BD" class="hash-link" aria-label="タイトルにHTMLを入れることも可能 への直接リンク" title="タイトルにHTMLを入れることも可能 への直接リンク">​</a></h3>
<p>なおタイトル部にHTMLを入れることもできます。TOCにも反映されます。</p>
<!-- -->
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><h4 id="テスト123テスト下線" class="anchor title anchorWithStickyNavbar_LWe7">テスト<sup>123</sup>テスト<u>下線</u></h4></div><div class="admonitionContent_UjKb"><div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">タイトル部のmarkdownは次の通りです。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">#### テスト&lt;sup&gt;123&lt;/sup&gt;テスト&lt;u&gt;下線&lt;/u&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="カスタマイズに利用した機能">カスタマイズに利用した機能<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AB%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E6%A9%9F%E8%83%BD" class="hash-link" aria-label="カスタマイズに利用した機能 への直接リンク" title="カスタマイズに利用した機能 への直接リンク">​</a></h2>
<p>カスタマイズは次の機能を活用しました。</p>
<ul>
<li><a href="https://docusaurus.io/docs/markdown-features/plugins" target="_blank" rel="noopener noreferrer">Remark/Rehypeのプラグイン</a></li>
<li><a href="https://docusaurus.io/docs/swizzling" target="_blank" rel="noopener noreferrer">Swizzling</a></li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="remarkとrehypeについて">RemarkとRehypeについて<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#remark%E3%81%A8rehype%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" class="hash-link" aria-label="RemarkとRehypeについて への直接リンク" title="RemarkとRehypeについて への直接リンク">​</a></h3>
<p>RemarkとRehypeは、markdownをHTMLに変換するプロセスにおいて、AST（抽象構文木・Abstract Syntax Tree）に作用するプラグインです。なお<a href="https://github.com/unifiedjs/unified" target="_blank" rel="noopener noreferrer">ASTを操作するオープンソースのエコシステム</a>の中にはもう一つ<a href="https://github.com/retextjs/retext" target="_blank" rel="noopener noreferrer">Retext</a>というプラグインもありますが、Docusaurusには実装されていないようです。</p>
<div class="language-md codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">markdownからHTMLへ変換処理の流れ</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-md codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">| ........................ process ........................... |</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">| .......... parse ... | ... run ... | ... stringify ..........|</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token code keyword" style="color:#00009f">          +--------+                     +----------+</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Input -&gt;- | Parser | -&gt;- Syntax Tree -&gt;- | Compiler | -&gt;- Output</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          +--------+          |          +----------+</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                              X</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                              |</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                       +--------------+</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                       | Transformers |</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">                       +--------------+</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>上図（<a href="https://github.com/unifiedjs/unified?tab=readme-ov-file#overview" target="_blank" rel="noopener noreferrer">Unified Overviewより</a>）にTransformersとあるところがRemark/Rehypeの動作するところ。</p>
<p>Remarkはmarkdown形式で、RehypeはHTML形式でASTを扱います。どちらも同じようにASTを操作できますが、データ構造が違うため、目的に応じて選択することになるのかなと思います。</p>
<p><a href="https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol2/spring-raining/index.html" target="_blank" rel="noopener noreferrer">こちらのサイト</a>などが詳しいです。</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="docusaurusにおけるプラグインの実行タイミング">Docusaurusにおけるプラグインの実行タイミング<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#docusaurus%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E5%AE%9F%E8%A1%8C%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0" class="hash-link" aria-label="Docusaurusにおけるプラグインの実行タイミング への直接リンク" title="Docusaurusにおけるプラグインの実行タイミング への直接リンク">​</a></h4>
<p>Docusaurusでこれらのプラグインを利用するためにはdocusaurus.config.jsonに設定が必要です。<a href="https://docusaurus.io/docs/markdown-features/plugins" target="_blank" rel="noopener noreferrer">このページによると</a>次の4種類の設定値にてプラグインを登録できます。</p>
<table><thead><tr><th></th><th>デフォルトプラグイン適用前</th><th>デフォルトプラグイン適用後</th></tr></thead><tbody><tr><td>Remark<br>Markdown形式</td><td>beforeDefaultRemarkPlugins</td><td>remarkPlugins</td></tr><tr><td>Rehype<br>HTML形式</td><td>beforeDefaultRehypePlugins</td><td>rehypePlugins</td></tr></tbody></table>
<p>markdownからHTMLへの変換処理のところで、Docusaurusは自前のプラグイン（デフォルトプラグイン）を使い「見出しにidをつける」「ASTからTOCを作成する」などの処理を行っています。そのため今回のように「Amonitionのタイトルを読んでTOCに反映する」ためには、デフォルトプラグイン適用前と適用後の両方のタイミングでの処理が必要になります。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="swizzlingについて">Swizzlingについて<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#swizzling%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" class="hash-link" aria-label="Swizzlingについて への直接リンク" title="Swizzlingについて への直接リンク">​</a></h3>
<p>Swizzlingは<a href="https://docusaurus.io/docs/swizzling" target="_blank" rel="noopener noreferrer">こちら</a>に説明がある通りの機能で、簡単に言うとReactのコンポーネントをカスタマイズできる機能です。</p>
<p>Swizzlingの設定をすると、Docusaurusがデフォルトのコンポーネントの代わりに自動的にカスタマイズしたコンポーネントを使用するようになります。</p>
<p>今回は、デフォルトのAdmonitionにないID属性を持たせるためAdmonitionコンポーネントをカスタマイズしました。Swizzlingの設定をすることにより、デフォルトのAdmonitionの代わりにこのカスタムコンポーネントが使われるようにします。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="動作原理">動作原理<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E5%8B%95%E4%BD%9C%E5%8E%9F%E7%90%86" class="hash-link" aria-label="動作原理 への直接リンク" title="動作原理 への直接リンク">​</a></h2>
<p>TOCは「ASTに含まれているheading要素を単純に配列に入れている」だけですが、この処理はカスタマイズで上書きできません。そこで、カスタマイズできる処理だけでAdmonitionのタイトルをTOCに反映する方法として次を思いつき、実装しました。</p>
<ol>
<li>docusaurusのデフォルトプラグインがTOCの処理を行うより前に、Admonitionのタイトル部を見出しとして新規作成し、Admonition要素の直前に追加する</li>
<li>docusaurusのデフォルトプラグインがTOCの処理を行い、Admonitionのタイトル部がTOCに入る。見出しにはidが付与される</li>
<li>デフォルトプラグインの処理が終了したら作成した見出しは不要になるので削除する。その際、削除する見出しと同じタイトルを持つAdmonition要素を探し、idを与える</li>
<li>AdmonitionコンポーネントでidをHTMLタグに付与する</li>
</ol>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="実装">実装<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E5%AE%9F%E8%A3%85" class="hash-link" aria-label="実装 への直接リンク" title="実装 への直接リンク">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="docusaurusconfigjson">docusaurus.config.json<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#docusaurusconfigjson" class="hash-link" aria-label="docusaurus.config.json への直接リンク" title="docusaurus.config.json への直接リンク">​</a></h3>
<p>まずdocusaurus.config.jsonにimportとplugin設定を記入します（ハイライト部）。</p>
<p>これでDocusaurusデフォルトプラグイン適用の前後にそれぞれ自作のRemark/Rehypeプラグインが実行されることになります。</p>
<p>blogなどを入れている場合は、そのプロパティにも記載します。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">docusaurus.config.json</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">admonitionTitleToHeadingBeforeTOC</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./src/remark/admonition-title-to-heading-before-toc.js'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">admonitionTitleToHeadingAfterTOC</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./src/rehype/admonition-title-to-heading-after-toc.js'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">presets</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token string" style="color:#e3116c">'classic'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/** </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@type</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> </span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment class-name keyword" style="color:#00009f;font-style:italic">import</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">(</span><span class="token doc-comment comment class-name string" style="color:#e3116c;font-style:italic">'@docusaurus/preset-classic'</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">)</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">.</span><span class="token doc-comment comment class-name" style="color:#999988;font-style:italic">Options</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">}</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">docs</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">beforeDefaultRemarkPlugins</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">admonitionTitleToHeadingBeforeTOC</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">rehypePlugins</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">admonitionTitleToHeadingAfterTOC</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">blog</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">beforeDefaultRemarkPlugins</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">admonitionTitleToHeadingBeforeTOC</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">rehypePlugins</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">admonitionTitleToHeadingAfterTOC</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="remarkrehypeプラグイン">Remark/Rehypeプラグイン<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#remarkrehype%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3" class="hash-link" aria-label="Remark/Rehypeプラグイン への直接リンク" title="Remark/Rehypeプラグイン への直接リンク">​</a></h3>
<p>次にプラグインを実装します。</p>
<p>docusaurusのsrcディレクトリ下にrehypeとremarkというディレクトリを作り、次のファイル名と内容で2つのプラグインを作ります。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">src/rehype/admonition-title-to-heading-before-toc.js</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">visit</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'unist-util-visit'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">plugin</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">transformer</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">ast</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> newBeginningText </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">""</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> visitor </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">node</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> index</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> parent</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'containerDirective'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// :::infoなどに続くタイトル冒頭Text部（冒頭#を含む（もしくは含まない）部分）を取得（:::info ##** ）</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// （タイトル全体にはHTML等が含まれる可能性があるため冒頭Text部だけ操作する、残りはシャロ―コピー）</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> beginningText </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// タイトル冒頭Text部に#が2つ以上連続しているとき</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">##</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">test</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">beginningText</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// タイトル冒頭部から#とそれに続く空白を削除</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          newBeginningText </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> beginningText</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">trim</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// タイトル部冒頭だけ更新し、残りはシャロ―コピー</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// まずタイトル部全体をシャロ―コピー</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> titleNodes </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// 冒頭要素のvalueを更新（ほかはシャロ―コピー）</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> newTitleBeginningNode </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">titleNodes</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> newBeginningText</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">         </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// タイトルノードの冒頭要素だけ更新（ほかはシャロ―コピー）</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> newTitleNodes </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">titleNodes </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          newTitleNodes</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> newTitleBeginningNode</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// visitしているcontainerDirectiveの前にheadingノードを追加</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">splice</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">index</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'heading'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">depth</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">beginningText</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">match</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">##</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// #の連続数がheadingの深さ</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token literal-property property" style="color:#36acaa">children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> newTitleNodes</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">//  次に検索するのはindexを2つ分飛ばしたノード</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> index </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token function" style="color:#d73a49">visit</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ast</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'containerDirective'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> visitor</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> transformer</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> plugin</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">src/rehype/admonition-title-to-heading-after-toc.js</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">visit</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'unist-util-visit'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">plugin</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">transformer</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">ast</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> hId </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> hContent </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token function" style="color:#d73a49">visit</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ast</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'element'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">node</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> index</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> parent</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">h</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">2</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#393A34">-</span><span class="token regex regex-source language-regex char-class range" style="color:#36acaa">6</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">test</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">tagName</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// H要素（h2~h6）を見つけた場合</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// IDとタイトルの冒頭Text部を取得する</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        hId </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">id</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        hContent </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> node</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// 続くAdmonitionを探す（docはH要素とadmonitionが連続しているが</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token comment" style="color:#999988;font-style:italic">// blogではなぜか改行要素{ type:'text', value:'\n' }が間に入っているので念のため隣接3要素を探す</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword control-flow" style="color:#00009f">for</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> i </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> index </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> i </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain"> index </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">4</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> i </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain"> parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> i</span><span class="token operator" style="color:#393A34">++</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">i</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">i</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">tagName</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'admonition'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// admonition（div）を見つけた場合</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> admonitionNode </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">i</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token comment" style="color:#999988;font-style:italic">// admonitionタイトルの冒頭Text部分を取得（properties.titleもしくはchildren[0].children[0].value）</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> admonitionNodeTitle </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">title</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">title</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">##</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">test</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">admonitionNodeTitle</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> admonitionNodeTitle</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">trim</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> hContent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">trim</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">// #で始まっていて、タイトル冒頭部が同じ場合</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">// divのidをHタグのidに設定</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              admonitionNode</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">properties</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">id</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> hId</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              </span><span class="token comment" style="color:#999988;font-style:italic">// H要素を削除</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">              parent</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">children</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">splice</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">index</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">            </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> transformer</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> plugin</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-note admonition_Gfwi alert alert--secondary"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>Admonitionのツリー構造</div><div class="admonitionContent_UjKb"><p>参考までに、Remarkのプラグインから見るとAdmonitionのASTは例えば次のようになっています。</p><div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">Admonitionのツリー構造（一例）</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'containerDirective'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'info'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">attributes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'paragraph'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">directiveLabel</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'text'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'#### info title もしHTML等が入ると（ここにaタグを入れると）'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'mdxJsxTextElement'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'a'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">attributes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token literal-property property" style="color:#36acaa">children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Array</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'text'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">value</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'このようにタイトル部が別々の要素として配列に入っている。'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">start</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">line</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1347</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">column</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">8</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">offset</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">34053</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token literal-property property" style="color:#36acaa">end</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">line</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1347</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">column</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">55</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">offset</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">34100</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'paragraph'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">children</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Array</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="swizzling">Swizzling<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#swizzling" class="hash-link" aria-label="Swizzling への直接リンク" title="Swizzling への直接リンク">​</a></h3>
<p>次にSwizzlingです。</p>
<p>Docusaurusのsrc/themeディレクトリにAdmonitionというディレクトリを作り、次の一例のファイルを格納します。</p>
<p>なお<a href="https://docusaurus.io/docs/swizzling#ejecting" target="_blank" rel="noopener noreferrer">ここに説明がある通り</a>SwizzlingにはEjectingとWrappingの方法があります。</p>
<p>WrappingではAdmonitionの内部までカスタマイズできないため「タイトル部分にidプロパティを付ける」といったことができません。そのためEjectingを使います。</p>
<div class="theme-admonition theme-admonition-note admonition_Gfwi alert alert--secondary"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>注記</div><div class="admonitionContent_UjKb"><p>Ejectingを使う場合はバージョンアップによってデフォルトのコンポーネントと挙動が変わってくる可能性があるのでアップグレードの際は注意が必要です。</p></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="ejecting">Ejecting<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#ejecting" class="hash-link" aria-label="Ejecting への直接リンク" title="Ejecting への直接リンク">​</a></h4>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">npm run swizzle @docusaurus/theme-classic Admonition -- --eject</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Docusaurus V3.1では次のようなメッセージが出ますので、YESを選びます。</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">? Do you really want to swizzle this unsafe internal component? » - Use arrow-keys. Return to submit.</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    NO: cancel and stay safe</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&gt;   YES: I know what I am doing!</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Ejectingをすると、実質的にnode_modulesの@docusaurus/theme-classic/lib/themeにあるコンポーネントがsrc/themeディレクトリにコピーされます。</p>
<p>あとはコピーされたコンポーネントをいじるだけです。</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="コードの変更">コードの変更<a href="https://yasutakeyohei.com/docs/blog/2024/01/27/docusaurus-admonition-heading-toc#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%A4%89%E6%9B%B4" class="hash-link" aria-label="コードの変更 への直接リンク" title="コードの変更 への直接リンク">​</a></h4>
<p>Layoutファイルを次のように変更するのみです。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">src/theme/Admonition/Layout/index.js</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">clsx</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'clsx'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports maybe-class-name">ThemeClassNames</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@docusaurus/theme-common'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">styles</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./styles.module.css'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports">headingStyles</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@docusaurus/theme-classic/lib/theme/Heading/styles.module.css'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">AdmonitionContainer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter">type</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> className</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> children</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token function" style="color:#d73a49">clsx</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token maybe-class-name">ThemeClassNames</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">common</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">admonition</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token maybe-class-name">ThemeClassNames</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">common</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">admonitionType</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">type</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        styles</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">admonition</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        className</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">AdmonitionHeading</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter">icon</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> title</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> id</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> depth </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> trimmedTitle </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// titleにHTML等が含まれている場合は文字列ではなく配列になる</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> title </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"string"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// 文字列冒頭の#の数を数える（</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    depth </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">match</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">title</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">match</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// #を省いたタイトルを得る</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    trimmedTitle </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> depth </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">trim</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"string"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    depth </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">match</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">title</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">match</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    trimmedTitle </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> depth </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">title</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">replace</span><span class="token punctuation" style="color:#393A34">(</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">#</span><span class="token regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">trim</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">title</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">slice</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// スクロール位置調整のcss</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> classNames </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">clsx</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"anchor"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"title"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> headingStyles</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">anchorWithStickyNavbar</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// depthに応じて見出しタグをレンダー</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">styles</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">admonitionHeading</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">span className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">styles</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">admonitionIcon</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">icon</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">span</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">depth </span><span class="token operator" style="color:#393A34">==</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">3</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">h3</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              id</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">classNames</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">trimmedTitle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">h3</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">depth </span><span class="token operator" style="color:#393A34">==</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">4</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">h4</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              id</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">classNames</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">trimmedTitle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">h4</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">depth </span><span class="token operator" style="color:#393A34">==</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">5</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">h5</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              id</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">classNames</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">trimmedTitle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">h5</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">depth </span><span class="token operator" style="color:#393A34">==</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">6</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">h6</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              id</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">classNames</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">trimmedTitle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">h6</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">              </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">trimmedTitle</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">            </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">          </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">AdmonitionContent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter">children</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> children </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">styles</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">admonitionContent</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">AdmonitionLayout</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">type</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> icon</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> title</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> children</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> className</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> props</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">AdmonitionContainer</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">type</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> className</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">className</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">AdmonitionHeading</span><span class="token plain"> title</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">title</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> icon</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">icon</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">=</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">AdmonitionContent</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">children</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">AdmonitionContent</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token maybe-class-name">AdmonitionContainer</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>上記を設定後、npm start等の再起動が必要です。</p>
<p>以上です。</p>]]></content>
        <author>
            <name>安竹 洋平</name>
            <email>yohei@yasutakeyohei.com</email>
            <uri>https://yasutakeyohei.com</uri>
        </author>
        <category label="技術" term="技術"/>
        <category label="docusaurus" term="docusaurus"/>
        <category label="v3.1" term="v3.1"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[新ふらっとブログ立ち上げました]]></title>
        <id>https://yasutakeyohei.com/docs/blog/2024/01/26/new-flat-blog</id>
        <link href="https://yasutakeyohei.com/docs/blog/2024/01/26/new-flat-blog"/>
        <updated>2024-01-26T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[新ふらっとブログ立ち上げました。議員活動やその裏で活用している技術について、誰かの役に立つかもしれないことを中心にまとめています。]]></summary>
        <content type="html"><![CDATA[<p>今後の展開を考え、これまでの議会活動等のまとめをこのDocusaurusの仕組みに移行しています。</p>
<p>ふらっとブログもこちらに新しく立ち上げることにしました。</p>
<p>議員活動や、その裏で活用している技術について、誰かの役に立つかもしれないことを中心にブログにしていきます😁</p>]]></content>
        <author>
            <name>安竹 洋平</name>
            <email>yohei@yasutakeyohei.com</email>
            <uri>https://yasutakeyohei.com</uri>
        </author>
        <category label="お知らせ" term="お知らせ"/>
        <category label="docusaurus" term="docusaurus"/>
    </entry>
</feed>