Une table des matières pour le notebook IPython avec JavaScript

MISE À JOUR le 25 nov 2015: Ce post n’est plus à jour pour Ipython version 4 a.k.a. Jupyter. voir ce nouveau post.

Si comme moi vous utilisez beaucoup le notebook IPython, vous pourriez être intéressés par une table des matières générée automatiquement.

Ajoutez le code suivant dans une cellule markdown :

<h1 id="toctitle">Contents</h1>
<ul id="toc"/>

1 2	<h1 id="toctitle">Contents</h1> <ul id="toc"/>

et ajoutez le fichier javascript suivant au bon endroit dans votre Ipython home (.ipython/profile_default/static/custom/custom.js si vous utilisez linux) :

var currenth1=0;

function regentoc() {
document.getElementById("toc").innerHTML = "";
var currenth1 = 0;
$("h1,h2").not(document.getElementById("toctitle")).each(function(mainIndex) {
    el = $(this);
    title = el.attr("id");
    text = el.html();
    link = "#" + el.attr("id");
    if ( document.getElementById(title).tagName == "H1" ) {
        currenth1 += 1;
        newLine =
            "<li class='maintoc'>" +
                currenth1 + " " +
                "<a href='" + link + "'>" + text + "</a>" +
            "</li>" +
            "<ul id='h1" + currenth1 + "'></ul>";
        document.getElementById("toc").innerHTML += newLine;
    } else if ( document.getElementById(title).tagName=="H2" ) {
        h1list = document.getElementById("h1"+currenth1);
        newLine = "<li class='subtoc'>" + "<a href='" + link + "'>" + text + "</a>" + "</li>";
        h1list.innerHTML += newLine;
    }
});
}

setInterval(regentoc,1000);

var currenth1=0;

function regentoc() {

document.getElementById("toc").innerHTML = "";

var currenth1 = 0;

$("h1,h2").not(document.getElementById("toctitle")).each(function(mainIndex) {

el = $(this);

title = el.attr("id");

text = el.html();

link = "#" + el.attr("id");

if ( document.getElementById(title).tagName == "H1" ) {

currenth1 += 1;

newLine =

"<li class='maintoc'>" +

currenth1 + " " +

"<a href='" + link + "'>" + text + "</a>" +

"</li>" +

"<ul id='h1" + currenth1 + "'></ul>";

document.getElementById("toc").innerHTML += newLine;

} else if ( document.getElementById(title).tagName=="H2" ) {

h1list = document.getElementById("h1"+currenth1);

newLine = "<li class='subtoc'>" + "<a href='" + link + "'>" + text + "</a>" + "</li>";

h1list.innerHTML += newLine;

}

});

}

setInterval(regentoc,1000);

Vous pouvez aussi changer le fichier custom.css si besoin pour obtenir le résultat final.

ipython-toc