Cómo crear pestañas jQuery de Markdown

Question

Actualmente estoy ejecutando un sistema de gestión de contenido basado en PHP que genera su contenido HTML con la ayuda de Markdown Extra . La mayoría del contenido está estructurado por encabezados y subtítulos que dan como resultado una página muy larga. Al principio de cada página, creo una tabla de contenido con la ayuda de una lista y Markdown Extra's Atributo de ID del encabezado .

Con el fin de acortar la longitud de una vista de página, me gustaría utilizar Complemento de pestañas en el primer nivel de encabezados.

El problema es que la salida de Markdown Extra no es compatible con qué el jQuery Complemento de pestañas está esperando porque Markdown Extra no está envolviendo el contenido de una sección en una etiqueta div separada.

¿Hay alguna manera de hacer que esas dos bibliotecas trabajen juntas?

EDITAR

Esto es el aspecto de la salida HTML:

 <p>Some intro text...</p>
 <h3>Table of content</h3>
 <ul>
  <li><a href="#sub1">Topic 1</a></li>
  <li><a href="#sub2">Topic 2</a></li>
  <li><a href="#sub3">Topic 3</a></li>
 </ul>
 <h3 id="sub1">Topic 1</h3>
 <p>The content of this topic.</p>
 <h3 id="sub2">Topic 2</h3>
 <p>The content of this topic.</p>
 <h3 id="sub3">Topic 3</h3>
 <p>The content of this topic.</p>

.. y este es el código correspondiente de Markdown:

Some intro text...

###Table of content###

* [Topic 1](#sub1)
* [Topic 2](#sub2)
* [Topic 3](#sub3)

###Topic 1### {#sub1}

The content of this topic.

###Topic 2### {#sub2}

The content of this topic.

###Topic 3### {#sub3}

The content of this topic.

Solución

Con un poco de ayuda de Cobbal, hice esta declaración de jQuery que transformará el marcado Markdown en algo con lo que funcionará el complemento Tabs:

  $("#tabs :header").each(function() 
  {
    var id = $(this).attr("id");
    if(id=="") return;    
    var div = $("<div>");
    var tagName = this.tagName;    
    $(this).nextAll().each(function()
    {
      if(this.tagName==tagName) return false;
      div.append(this);
    });
    $(this).removeAttr("id");
    div.attr("id", id);
    $(this).before(div);
    div.prepend(this);
  });

Pero el hecho de que necesito transformar el marcado para que se ajuste al complemento Tabs en lugar de simplemente decirle al complemento Tabs que debe seleccionar su contenido de una manera diferente puede hacer que esta solución no sea la ideal.

Answer 1

en tu documento.ready

$("#sub1,#sub2,#sub3").each(function() {
    var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
    $(this).before(containerDiv);
    containerDiv.append(this);
});

y cambia tu markdown a

...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...

Answer 2

Me parece que puedes envolver la tabla de contenido en un div mismo.

A la mitad de la página Markdown Extra que has vinculado, se muestra cómo insertar Markdown dentro de un div, como este:

PHP Markdown Extra le ofrece una manera de colocar texto en formato Markdown dentro de cualquier etiqueta de nivel de bloque. Para ello, agregue un atributo de rebaja a la etiqueta con el valor 1 & # 8212; lo que da markdown = " 1 " & # 8212; de esta manera:

<div markdown="1">
This is *true* markdown text.
</div>

La rebaja = " 1 " el atributo se eliminará y el contenido de & # 8217; se convertirá de Markdown a HTML. El resultado final se verá así:

<div>

<p>This is <em>true</em> markdown text.</p>

</div>