online - markdown tutorial

Encabezado colapsable en Markdown to html

Question

Nuestro wiki interno de git-lab funciona con Markdown. Hice varios resúmenes de artículos y quiero publicarlos en nuestro wiki, de tal manera que si hago clic en el encabezado, debería desplegarse y el texto debería ser visible, básicamente como en este example

¿Tiene Markdown esta función expandir / contraer / plegar?

Answer 1

Respuesta corta: No, Markdown no ofrece una función como esa directamente, pero con algo de trabajo puede ser capaz de construir algo que funcione.

Para que una característica como esa funcione, necesitaría algo de CSS y / o JavaScript para controlar las animaciones, etc. Si bien es posible que esa característica funcione en cualquier HTML, no es particularmente fácil en la salida de Markdown.

Idealmente, cada sección plegable se envolvería en 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>

Luego puedes usar algo de CSS / JavaScript para contraer las secciones individuales. Sin embargo, Markdown no tiene un concepto de secciones. En lugar de lo anterior, Markdown le daría este documento plano:

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

Una solución requeriría recorrer todo el documento, dividirlo en varias secciones y envolver cada sección en divs. Puede encontrar un couple examples de eso como Extensiones al analizador de reducción de Python. Sin embargo, con cualquier información sobre el entorno en el que está trabajando, es un poco más difícil apuntarle en la dirección correcta. Además, Stackoverflow no se supone que sea un sitio de recomendación de herramientas. Sin embargo, al observar cómo otros han resuelto el problema (en los ejemplos que señalé), debería poder encontrar una solución similar.

Una vez que obtenga las secciones correctamente envueltas, un poco de JavaScript para plegar / contraer las secciones individuales se encargará del resto. Sin embargo, ese es un problema aparte que se ha preguntado y respondido muchas veces aquí. Vea algunas de las preguntas "relacionadas" que se enumeran en la barra lateral para obtener soluciones para esa parte del problema.

Incluso es posible que existan algunas bibliotecas de JavaScript que tomarán el contenido HTML simple, realizar el ajuste de la sección e implementar la función de plegado / contracción todo en uno. Sin embargo, una biblioteca de este tipo puede ser un poco pesada y ralentizar su sitio, así que proceda con el catión.

Answer 2

Tratar:

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

Puedes probar este tipo de cosas aquí:

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

Esto me funciona con Chrome, pero puede que aún no funcione con otros navegadores. Hay algunas publicaciones relacionadas en github .