Wie erstelle ich jQuery Tabs aus Markdown

Question

Ich bin derzeit ein PHP-basiertes Content-Management-System ausgeführt wird, die mit Hilfe von Markdown extra-. Der größte Teil des Inhalts wird von Rubriken und Unterrubriken gegliedert, die in einer sehr langen Seite zur Folge hat. Am Anfang jeder Seite erstelle ich ein Inhaltsverzeichnis mit Hilfe einer Liste und Markdown Extras Rubrik Id Attribut .

oder die Länge einer Seitenansicht zu verkürzen, würde Ich mag die Tabs Plugin jQuery verwenden auf der ersten Ebene, deren Positionen.

Das Problem ist, dass die Ausgabe von Markdown Extra- nicht kompatibel ist mit dem, was die jQuery Tabs Plugin erwartet, weil Markdown Extra- wird, um den Inhalt eines Abschnitts in einen separaten div-Tag nicht gewickelt wird.

Gibt es eine Möglichkeit, wie diese beiden Bibliotheken zusammenarbeiten zu machen?

EDIT

Dies ist, was die HTML-Ausgabe sucht wie:

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

.. und das ist der entsprechende Code 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.

Lösung

Mit einer wenig Hilfe von cobbal ich diese jQuery Aussage gemacht, die den Markdown-Markup in etwas verwandeln, das die Tabs Plugin funktioniert:

  $("#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);
  });

Aber die Tatsache, dass ich das Markup zu transformieren die Tabs Plugin eher zu passen als nur sagen, das Tabs-Plugin, dass es seinen Inhalt in einer anderen Art und Weise wählen sollte diese Lösung gestellt hat, kann nicht die ideale ein.

Answer 1

auf Ihrem document.ready

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

und ändern Sie Ihren Abschlag auf

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

Answer 2

Es scheint mir, wie Sie das Inhaltsverzeichnis in einem div wickeln konnte sich selbst.

Auf halbem Weg nach unten die Markdown Extra-Seite, die Sie mit ihm verbunden zeigt, wie Markdown in einem div einzufügen, wie folgt aus:

PHP Markdown gibt Ihnen extra einen Weg Markdown-formatierten Text innerhalb jedem platzieren Block-Level-Tag. Sie tun dies, indem ein Abschlag Attribut mit dem Tag Zugabe mit der Wert 1 - der Abschlag gibt = „1“ - wie folgt aus:

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

Der Abschlag = „1“ Attribut wird abgezogen und der ‚Inhalt wird von Markdown in HTML konvertiert werden. Das Endergebnis wird wie folgt aussehen:

<div>

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

</div>