How to create jQuery tabs from Markdown

Question

I am currently launching a PHP-based content management system that generates its HTML content using Markdown Extra . Most of the content is structured with headings and subheadings, which leads to a very long page. At the top of each page, I create a table of contents using the list and the Markdown Extra header identifier attribute .

To shorten the page view, I would like to use jQuery Tabs Plugin on the first level of headings.

The problem is that the output of Markdown Extra is not compatible with the fact that jQuery "Tab Plugin" is expected because Markdown Extra does not wrap the contents of the section in a separate div tag.

Is there any way these two libraries work together?

EDIT

Here's what the HTML output looks like:

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

.. and this is the corresponding Markdown code:

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.

Decision

With a little cobbal help, I made this jQuery expression that converts Markdown markup into something that the Tabs plugin will work with:

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

But the fact that I need to convert the markup according to the Tabs plugin, and not just tell the Tabs plugin that it should select its content differently, may make this solution not ideal.

Answer 1

.

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

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

Answer 2

, div.

Markdown Extra, , , Markdown div, :

PHP Markdown Extra Markdown . , markdown 1 - markdown = "1" - :

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

markdown = "1" , s Markdown HTML. :

<div>

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

</div>