web-dev-qa-db-ja.com

MarkdownのHTMLへの折りたたみ可能なヘッダー

社内のgit-lab wikiはMarkdownで動作します。記事の要約をいくつか作成し、ヘッダーにクリックすると、ヘッダーが展開され、テキストが表示されるように、基本的に次のようにWikiに投稿したいと思います example

Markdownにはこの展開/折りたたみ/折りたたみ機能はありますか？

markdownwikicollapsefold
25
Sasha-Li

短い回答：いいえ、Markdownはそのような機能を直接提供していませんが、いくつかの作業を行うと、機能するものを構築できる場合があります。

このような機能を動作させるには、アニメーションなどを制御するためにCSSやJavaScriptが必要になります。そのような機能をHTMLで動作させることはできるかもしれませんが、Markdown出力では特に簡単ではありません。

理想的には、折りたたみ可能な各セクションはdivでラップされます。

<div id="section1">
  <h1>Section 1</h1>
  <p>Section 1 content</p>
  <div id="section1-1">
    <h2>Section1-1</h2>
    <p>section 1-1 content</p>
  </div>
    <div id="section1-2">
    <h2>Section1-2</h2>
    <p>section 1-2 content</p>
  </div>
</div>

次に、CSS/JavaScriptを使用して、個々のセクションを折りたたむことができます。ただし、Markdownにはセクションの概念はありません。上記の代わりに、Markdownは次のフラットドキュメントを提供します。

<h1>Section 1</h1>
<p>Section 1 content</p>
<h2>Section1-1</h2>
<p>section 1-1 content</p>
<h2>Section1-2</h2>
<p>section 1-2 content</p>

ソリューションでは、ドキュメント全体をループし、さまざまなセクションに分割して、各セクションをdivでラップする必要があります。 coupleexamples は、Python-Markdownパーサーの拡張機能として見つかります。ただし、作業している環境に関する情報があれば、正しい方向を示すのは少し難しくなります。さらに、Stackoverflowはツールの推奨サイトではありません。ただし、他の人がどのように問題を解決したか（私が指摘した例）を観察すると、同様の解決策を見つけることができます。

セクションが適切にラップされたら、個々のセクションを折りたたむ/折りたたむ小さなJavaScriptが残りの部分を処理します。しかし、それはここで何度も尋ねられ回答された別の問題です。問題のその部分の解決策については、サイドバーにリストされている「関連する」質問のいくつかを参照してください。

プレーンHTMLコンテンツを取得し、セクションの折り返しを行い、折りたたみ/折りたたみ機能をすべて1つに実装するJavaScriptライブラリが存在する可能性もあります。ただし、そのようなライブラリは少し重く、サイトの速度が低下する可能性があるため、カチオン化を進めてください。

9
Waylan

試してください：

<details>
  <summary>Your header here! (Click to expand)</summary>
  Your content here...
  > markup like blockquote's should even work on github!
  more content here...
</details>

この種のものをここで試すことができます：

    <details>
      <summary>Your header here! (Click to expand)</summary>
      Your content here...</br>
      (markup only where supported)</br>
      more content here...</br>
    </details>

これはChromeで動作しますが、他のブラウザではまだ動作しない場合があります。 githubの関連記事 がいくつかあります。

47
Touby

Githubリポジトリがあなたが望むことをする存在します： szhielelp/md-post-header-collapse 。

マークダウンポストでヘッダーを折りたたみ可能にするjqueryツール

https://szhshp.org/tech/2016/08/23/jekyllmdpostcollapse.html これはドキュメントであり、プラグインの機能を確認できます。

基本的な考え方は、ヘッダーをクリックするたびにすべてのヘッダーの子要素の表示/非表示の状態を逆にすることです。


    let collapse = function (headerElem) {

        let isShow = headerElem.hasClass('headerCollapsed') ? true : false;
        if (isShow) {
            // collapsed
            headerElem.removeClass('headerCollapsed');
        } else {
            headerElem.addClass('headerCollapsed');
        }

        /* collapse all header's children */
        headerCollapse(headerElem, headerElem.next(), isShow);
    }

    let headerCollapse = function (headerElem, currentElem, isShow) {
            /* I remove the end condition  */
            if (isShow) {
                currentElem.show(400);

                /* reset status */
                currentElem.removeClass('headerCollapsed')
            } else {
                currentElem.hide(400);
            }

            headerCollapse(headerElem, currentElem.next(), isShow)
        }
    }
1
Ynjxsjmh