将自定义 css class 添加到 Jupyter notebook 渲染的 Markdown 单元格中的标签

Question

执行 Jupyter notebook 中的 Markdown 单元格时，输出呈现为 HTML。我想将自定义 css class 添加到特定呈现的 HTML 标记的每个实例。具体来说，我想将 'fragment' class 添加到所有呈现的 <li> 标签，以便 reveal.js 在笔记本处于幻灯片模式时自动将列表项视为片段（而不是将每个列表项都放在自己的笔记本单元格中只是为了让它像片段一样工作）。

我知道我可以在 HTML 中为每个列表项手动指定 'fragment' class -- 这确实会在幻灯片模式下产生预期的行为。但它不必要地麻烦，因为我希望我的幻灯片的默认行为是 all 列表项像片段一样。 Jupyter 是否公开了某种 "afterRender" JS 事件，可用于在执行单元格后轻松地将 addClass('fragment') 添加到单元格中的所有 <li> 标记？如果没有，有没有其他方法可以轻松实现这个目标？

Answer 1

解决方案是为 Jupyter（从 4.1.0 开始）公开的 rendered.MarkdownCell 事件添加一个事件处理程序。里面 custom.js:

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

这会将 'fragment' class 添加到当前笔记本中找到的每个 <li> 标签。

将自定义 css class 添加到 Jupyter notebook 渲染的 Markdown 单元格中的标签

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

jupyter

jupyter-notebook