CODEWITHSUNDEEP
jupyterjupyter-notebook
Tal Yarkoni
Tal Yarkoni

Reputation: 2564

Add custom css class to tags in rendered Markdown cells of Jupyter notebook

When Markdown cells in a Jupyter notebook are executed, the output is rendered as HTML. I'd like to add a custom css class to every instance of a particular rendered HTML tag. Specifically, I want to add the 'fragment' class to all rendered <li> tags, in order to have reveal.js automatically treat list items as fragments when the notebook is in slideshow mode (rather than having to put each list item in its own notebook cell just to get it to act like a fragment).

I'm aware that I could just manually specify the 'fragment' class in HTML for each list item--and this does indeed produce the intended behavior in slideshow mode. But it's unnecessarily cumbersome, since I want the default behavior for my slideshows to be that all list items act like fragments. Does Jupyter expose some kind of "afterRender" JS event that could be used to easily addClass('fragment') to all <li> tags in a cell after a cell is executed? If not, is there any other way to easily achieve this goal?

Upvotes: 0

Views: 1074

Answers (1)

Tal Yarkoni
Tal Yarkoni

Reputation: 2564

The solution was to add an event handler for the rendered.MarkdownCell event exposed by Jupyter (as of 4.1.0). Inside custom.js:

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

This adds the 'fragment' class to every <li> tag found in the current notebook.

Upvotes: 2

Related Questions