Comment créer des onglets jQuery à partir de Markdown

Question

J'utilise actuellement un système de gestion de contenu basé sur PHP qui génère son contenu HTML à l'aide de Markdown Extra . La plupart du contenu est structuré par titres et sous-titres, ce qui donne une très longue page. Au début de chaque page, je crée une table des matières à l'aide d'une liste et de Markdown Extra's Attribut d'identifiant d'en-tête .

Afin de raccourcir la longueur d'une page, j'aimerais utiliser le Plugin Tabs au premier niveau de titre.

Le problème est que la sortie de Markdown Extra n'est pas compatible avec quoi le plug-in d'onglets jQuery est attendu parce que Markdown Extra n'englobe pas le contenu d'une section dans une balise div séparée.

Existe-t-il un moyen de faire fonctionner ces deux bibliothèques ensemble?

EDIT

Voici à quoi ressemble la sortie 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>

.. et c'est le code de démarquage correspondant:

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.

Solution

Avec un peu d’aide de cobbal, j’ai fait cette déclaration jQuery qui transformera le balisage Markdown en quelque chose avec lequel le plugin Tabs fonctionnera:

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

Mais le fait que je doive transformer le balisage pour l'adapter au plug-in Tabs plutôt que de simplement indiquer au plug-in Tabs qu'il doit sélectionner son contenu d'une manière différente risque de rendre cette solution non idéale.

Answer 1

sur votre document.ready

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

et remplacez votre démarque par

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

Answer 2

Il me semble que vous pourriez emballer vous-même la table des matières dans une div.

Au milieu de la page Markdown Extra que vous avez liée, vous apprendrez à insérer Markdown dans un div, comme ceci:

PHP Markdown Extra vous permet de placer du texte au format Markdown dans n’importe quel balise de niveau bloc. Vous faites cela en ajoutant un attribut de démarque à la balise avec la valeur 1 & # 8212; ce qui donne markdown = " 1 " & # 8212; comme ceci:

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

The markdown = " 1 " attribut sera supprimé et le contenu de & # 8217; sera converti de Markdown en HTML. Le résultat final ressemblera à ceci:

<div>

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

</div>