Accordion拡張機能

長い要素を折りたたみ要素にまとめます


taiseiue | 2024-03-11

対応バージョン:>=2.9.4

Accordion拡張機能は、Lantanaに折り畳み要素を追加する拡張機能です。

この拡張機能を有効化することで、以下のコンポーネントが使用できるようになります。

  • 折り畳み要素

使用方法

折り畳みを使用するには、??? タイトルで囲みます。

Markdown
??? "ポラーノの広場"
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
    またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

結果

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

また、最初から開いておくには、???+ タイトルで囲みます。

Markdown
???+ "AliceScriptのツアー"
    AliceScript(「アリススクリプト」と読みます)は、.NET上で動作する軽量なスクリプト言語です。AliceScriptはJavaScriptと同等の書きやすさをもち、かつC#などの読みやすさや安全性も備えています。AliceScriptはC言語やC#、Java、JavaScript、PHPを使用したことのあるプログラマーならすぐに使いこなすことができます。

結果

AliceScript(「アリススクリプト」と読みます)は、.NET上で動作する軽量なスクリプト言語です。AliceScriptはJavaScriptと同等の書きやすさをもち、かつC#などの読みやすさや安全性も備えています。AliceScriptはC言語やC#、Java、JavaScript、PHPを使用したことのあるプログラマーならすぐに使いこなすことができます。

色のカスタマイズ

展開時の色をカスタマイズすることもできます。このとき、指定したタグと実際の色との対応はAlertsと同じです。

Markdown
???+ note "メモ"
    `note`で使用できる装飾です。

???+ abstract
    `abstract`で使用できる装飾です。

???+ info
    `info`で使用できる装飾です。

???+ tip
    `tip`で使用できる装飾です。

???+ success
    `success`で使用できる装飾です。

???+ question
    `question`で使用できる装飾です。

???+ warning
    `warning`で使用できる装飾です。

???+ failure
    `failure`で使用できる装飾です。

???+ danger
    `danger`で使用できる装飾です。

???+ bug
    `bug`で使用できる装飾です。

???+ example
    `example`で使用できる装飾です。

???+ quote
    `quote`で使用できる装飾です。

結果

noteで使用できる装飾です。

abstractで使用できる装飾です。

infoで使用できる装飾です。

tipで使用できる装飾です。

successで使用できる装飾です。

questionで使用できる装飾です。

warningで使用できる装飾です。

failureで使用できる装飾です。

dangerで使用できる装飾です。

bugで使用できる装飾です。

exampleで使用できる装飾です。

quoteで使用できる装飾です。

アコーディオンのネスト

アコーディオン内にアコーディオンを含めることもできます。

Markdown
???+ note "巻き込み"
    ???+ note "巻き込み"
        これはネストされたアコーディオンです。

結果

これはネストされたアコーディオンです。

アコーディオン回避

noaccordionクラスを使用することで、拡張機能によってdetails要素がアコーディオンに変換されるのを回避できます。

Markdown
<details class="noaccordion">
  <summary>Details</summary>
  このdetailsはアコーディオンになりません。
</details>

結果

Details このdetailsはアコーディオンになりません。

導入方法

設定ファイル(mkdocs.yml)に以下の行を追加します。

mkdocs.yml
markdown_extensions:
      (中略)
    - lantana.accordion

このとき、accordionsuperfencesより後に追加してください。