Hinzufügen von benutzerdefinierten CSS-Klasse zu Tags in gerenderten Markdown-Zellen von Jupyter Notebook

Question

Wenn Markdown-Zellen in einem Jupyter Notebook ausgeführt werden, wird die Ausgabe als HTML gerendert. Ich möchte eine benutzerdefinierte CSS-Klasse zu jeder Instanz eines bestimmten wiedergegebenen HTML-Tags hinzufügen. Insbesondere möchte ich die Klasse "fragment" allen gerenderten Tags <li> hinzufügen, damit reveal.js Listenelemente automatisch als Fragmente behandelt, wenn sich das Notizbuch im Diashow-Modus befindet (anstatt jedes Listenelement in ein eigenes Notizbuch zu legen) Zelle, nur um es wie ein Fragment zu handeln).

Ich bin mir bewusst, dass ich nur manuell die "Fragment" -Klasse in HTML für jedes Listenelement angeben konnte - und dies erzeugt tatsächlich das beabsichtigte Verhalten im Diashow-Modus. Aber es ist unnötig umständlich, da ich möchte, dass das Standardverhalten für meine Diashows alle Listenelemente wie Fragmente handeln. Stellt Jupyter eine Art von "afterRender" JS-Ereignis zur Verfügung, das dazu verwendet werden könnte, die Klasse <li> in einer Zelle nach der Ausführung einer Zelle leicht zu "class" ("fragment") hinzuzufügen? Wenn nicht, gibt es einen anderen Weg, dieses Ziel leicht zu erreichen?

Answer 1

Die Lösung bestand darin, einen Event-Handler für das rendered.MarkdownCell-Ereignis hinzuzufügen, das von Jupyter (ab 4.1.0) verfügbar gemacht wurde. Innerhalb custom.js:

require(['base/js/events'], function(events) { 
    events.on("rendered.MarkdownCell", function() { 
     $('li').addClass('fragment'); 
    }); 
}); 

Damit wird die 'Fragment' Klasse zu jedem <li> Tag im aktuellen Notebook gefunden.