web-dev-qa-db-fra.com

En-tête pliable dans Markdown en html

Notre wiki git-lab interne fonctionne avec Markdown. J'ai fait plusieurs résumés d'articles et je veux les publier dans notre wiki, de telle sorte que si je clique sur l'en-tête, il devrait se déplier et le texte devrait devenir visible, essentiellement comme dans ce exemple

Est-ce que Markdown a cette fonction de développement/réduction/repli?

markdownwikicollapsefold
25
Sasha-Li

Réponse courte: Non, Markdown n'offre pas directement une telle fonctionnalité, mais avec du travail, vous pourrez peut-être créer quelque chose qui fonctionne.

Pour qu'une fonctionnalité comme celle-ci fonctionne, vous auriez besoin de CSS et/ou de JavaScript pour contrôler les animations, etc.

Idéalement, chaque section pliable serait enveloppée dans une 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>

Ensuite, vous pouvez utiliser du CSS/JavaScript pour réduire les sections individuelles. Cependant, Markdown n'a pas de concept de sections. Au lieu de ce qui précède, Markdown vous donnerait ce document plat:

<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>

Une solution nécessiterait de parcourir le document en entier, de le diviser en différentes sections et d'envelopper chaque section en divs. Vous pouvez trouver un coupleexemples de cela en tant qu'extensions de l'analyseur Python-Markdown. Cependant, avec toute information concernant l'environnement dans lequel vous travaillez, il est un peu plus difficile de vous orienter dans la bonne direction. De plus, Stackoverflow n'est pas censé être un site de recommandation d'outils. Cependant, en observant comment d'autres ont résolu le problème (dans les exemples que j'ai mentionnés), vous devriez pouvoir trouver une solution similaire.

Une fois que vous avez correctement emballé les sections, un peu de JavaScript pour replier/réduire les sections individuelles s'occupe du reste. Cependant, c'est une question distincte qui a été posée et répondue à plusieurs reprises ici. Consultez certaines des questions "connexes" répertoriées dans la barre latérale pour trouver des solutions à cette partie du problème.

Il est même possible que certaines bibliothèques JavaScript existent qui prennent le contenu HTML brut, effectuent l'habillage des sections et implémentent la fonction de repli/repli tout en un. Cependant, une telle bibliothèque peut être un peu lourde et ralentir votre site, alors passez au cation.

9
Waylan

Essayer:

<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>

Vous pouvez essayer ce genre de chose ici:

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

Cela fonctionne pour moi avec Chrome, mais peut ne pas fonctionner encore pour d'autres navigateurs. Il y a quelques messages connexes sur github .

47
Touby

Il existe un dépôt github fait ce que vous voulez: szhielelp/md-post-header-collapse .

Un outil jquery pour rendre l'en-tête pliable dans le post de démarque

https://szhshp.org/tech/2016/08/23/jekyllmdpostcollapse.html est son document et vous pouvez voir ce que fait ce plugin.

L'idée de base est d'inverser l'état d'affichage/masquage de tous les éléments enfants de l'en-tête chaque fois que vous cliquez sur un en-tête.


    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