tête Pliable Markdown en html

Question

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

étendre/réduire/plier la fonction?

Answer 1

Réponse courte: Non, Markdown ne propose pas une caractéristique comme ça directement, mais avec un peu de travail, vous pourriez être en mesure de construire quelque chose qui fonctionne.

Pour qu'une fonctionnalité comme celle-ci fonctionne, vous avez besoin de CSS et/ou JavaScript pour contrôler les animations, etc. Bien que vous puissiez obtenir une telle fonctionnalité pour travailler sur n'importe quel HTML, ce n'est pas particulièrement facile. sortie.

Idéalement, chaque section pliable sera enveloppé dans un 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 un peu de CSS/JavaScript pour replier les sections. Cependant, Markdown n'a pas de concept de sections. Au lieu de ce qui précède, Markdown vous donnera 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 une boucle à travers le document, le découper en différentes sections et envelopper chaque section divs. Vous pouvez trouver un coupleexamples de ce que les extensions au Parser 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'outil. Cependant, en observant comment les autres ont résolu le problème (dans les exemples que j'ai indiqués), vous devriez être capable de trouver une solution similaire.

Une fois que vous obtenez les sections correctement Emballé, puis un peu JavaScript pour plier/déplier les sections se chargeront du reste. Cependant, c'est une question distincte qui a été posée et répondue plusieurs fois ici. Consultez certaines des questions "connexes" répertoriées dans l'encadré pour trouver des solutions à cette partie du problème.

Il est même possible que certaines bibliothèques JavaScript existent qui prendra la teneur en HTML brut, faire l'emballage de section et mettre en œuvre la fonction fois/effondrement tout en un. Cependant, une telle bibliothèque peut être un peu lourde et ralentir votre site, alors procédez avec cation.

Answer 2

Essayez:

<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 ne fonctionne pas encore pour les autres navigateurs. Il existe quelques related posts at github.