Come creare le schede jQuery da Markdown

Question

Attualmente sto gestendo un Content-Management-System basato su PHP che genera il suo contenuto HTML con l'aiuto di Markdown Extra . Gran parte del contenuto è strutturato in titoli e sottotitoli che si traducono in una pagina molto lunga. All'inizio di ogni pagina creo un sommario con l'aiuto di un elenco e Markdown Extra's Attributo ID intestazione .

Al fine di ridurre la lunghezza di una visualizzazione di pagina, vorrei utilizzare Tabs Plugin al primo livello delle intestazioni.

Il problema è che l'output di Markdown Extra non è compatibile con ciò il jQuery Tabs Plugin si aspetta perché Markdown Extra non racchiude il contenuto di una sezione in un div-tag separato.

C'è un modo per far lavorare insieme queste due librerie?

Modifica

Ecco come appare l'output 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>

.. e questo è il codice Markdown corrispondente:

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.

Soluzione

Con un piccolo aiuto di Cobbal ho fatto questa dichiarazione jQuery che trasformerà il markdown Markdown in qualcosa con cui funzionerà il plugin 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);
  });

Ma il fatto che ho bisogno di trasformare il markup per adattarlo al plug-in Tabs piuttosto che dire semplicemente al plug-in Tabs che dovrebbe selezionare il suo contenuto in un modo diverso potrebbe rendere questa soluzione non ideale.

Answer 1

sul tuo documento. già

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

e modifica il markdown in

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

Answer 2

Mi sembra che tu possa avvolgere il sommario in un div da solo.

A metà della pagina Markdown Extra che hai collegato ad essa viene mostrato come inserire Markdown all'interno di un div, in questo modo:

PHP Markdown Extra ti dà un modo per inserire il testo in formato Markdown all'interno di qualsiasi tag a livello di blocco. A tale scopo, aggiungi un attributo markdown al tag con il valore 1 - che fornisce markdown = " 1 " - in questo modo:

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

Il markdown = " 1 " l'attributo verrà rimosso e il contenuto del file verrà convertito da Markdown a HTML. Il risultato finale sarà simile al seguente:

<div>

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

</div>