Documentation HTML

Je profite de mon congé paternité pour peaufiner une documentation que je fais pour le boulot ; cette documentation est réalisée en HTML, ou pour être plus précis en XHTML. Voici quelques bêtes tuyaux qui me sont utiles pour générer ma documentation.

Pour la numéroter les chapitres j'utilise les titres (h1,h2,...) et je profite des possibilités offertes par le CSS :

h1:before {
    content: counter(chapter) ". ";
    counter-increment: chapter; 
}
h1 {
    counter-reset: section;
    font-size: 150%;
    color:rgb(17,127,185);
}

h2:before {
    content: counter(chapter) "." counter(section) ". ";
    counter-increment: section;
}
h2{
counter-reset: subsection;
font-size: 140%;
color:rgb(17,127,185);
}

h3:before {
    content: counter(chapter) "." counter(section) "." counter(subsection) ". ";
    counter-increment: subsection;
}
h3{
counter-reset: h4section;
font-size: 130%;
color:rgb(17,127,185);
}
...

Pour générer la table des matières j'ai une petite fonction javascript toute prête ; faite en quelques minutes, donc sans doute très largement améliorable, mais qui a le mérite de marcher :)

tdm = new Array();

function generateTDM(startTag) {
 var nbChilds = startTag.childNodes.length;
 for (var i = 0; i < nbChilds; i++) {
  var tag = startTag.childNodes[i];
  var tagName = tag.nodeName.toLowerCase();
  if (tagName == 'h1' || tagName == 'h2' || tagName == 'h3' 
                              || tagName == 'h4' || tagName == 'h5' 
                              || tagName == 'h6') {
         tdm[tdm.length] = tag ;
        }
        else {
         generateTDM(tag);
        }
 }
}


function start() {
 var text ="<ul class=\"tdm\">\n";
 generateTDM(document.getElementsByTagName("body")[0]);
 var number = new Array();
 for (i=0;i<tdm.length;i++) {
  if (tdm[i].nodeName.toLowerCase()=="h1") {
   if (!number[0]) number[0]=0;
   number[0] = 1+number[0];
   while (number.length>1) number.pop();
  }
  else if (tdm[i].nodeName.toLowerCase()=="h2") {
   if (!number[1]) number[1]=0;
   number[1] = 1+number[1];
   while (number.length>2) number.pop();
  }
  else if (tdm[i].nodeName.toLowerCase()=="h3") {
   if (!number[2]) number[2]=0;
   number[2] = 1+number[2];
   while (number.length>3) number.pop();
  }
  else if (tdm[i].nodeName.toLowerCase()=="h4") {
   if (!number[3]) number[3]=0;
   number[3] = 1+number[3];
   while (number.length>4) number.pop();
  }
  else if (tdm[i].nodeName.toLowerCase()=="h5") {
   if (!number[4]) number[4]=0;
   number[4] = 1+number[4];
   while (number.length>5) number.pop();
  }
  else if (tdm[i].nodeName.toLowerCase()=="h6") {
   if (!number[5]) number[5]=0;
   number[5] = 1+number[5];
  }
  
  if (tdm[i].id=="") {
   tdm[i].id="td"+i;
  }
  text+="<li class=\""+tdm[i].nodeName.toLowerCase()+"\">";
  for (j=0;j<number.length;j++){
   text+=number[j];
   if (j<number.length-1) text+=".";
  }
  text+="<a href=\"#"+tdm[i].id+"\">"+tdm[i].innerHTML+"</a></li>\n";
 }
 text+="</ul>\n";
 document.getElementById("thetdm").innerHTML=text;
}

Cette fonction génère le code HTML de la table des matières puis l'ajoute dans l'élément HTML trouvé d'id=thetdm du document ; par exemple :

<div id="thetdm">...</div>

Et voilà, rien de plus simple :)