<details></details> Firefox 中的 Jupyter HTML nbconverted 文件中未显示 HTML5 下拉字符

问题描述

这个问题让我有些头疼。对于 jupyter 实验室研讨会，我们使用了 <details></details> 提供有关点击的更多信息。

但是，当笔记本通过 nbconvert 转换为 HTML 时，下拉箭头只会在 Chrome 中显示，而不会在 Firefox 中显示。

看看这个 (Firefox)：

在 Chrome 中：

解决方法

这是由以下 Bootstrap 元素引起的..

summary {
  display: block;
}

..它被添加到 HTML 输出中。

要解决此问题，必须将以下代码添加到转换后的 HTML 中：

<style type="text/css">
/* Fix details summary arrow
   not shown in Firefox
   due to bootstrap
   display: block;
 */
summary {
    display: list-item;
}
</style>

可以创建一个自动添加此内容的 nbconvert 模板。

创建一个名为 nbconvert.tpl 的文件，内容如下：

{% extends 'full.tpl'%}

{# this template will render cells with tags highlight,highlight_red and hide_code differently #}

{% block header %}
    {{ super() }}
    <style type="text/css">
    /* Fix details summary arrow
       not shown in Firefox
       due to bootstrap
       display: block;
     */
    summary {
        display: list-item;
        outline: none;
    }
    </style>
{% endblock header%}

{% block input_group %}
    {{ super() }}
{% endblock input_group %}

{% block output_group %}
    {{ super() }}
{% endblock output_group %}

并在将 jupyter notebooks 转换为 HTML 文件时使用它：

jupyter nbconvert --to html \
    --output-dir=. ./notebook.ipynb \
    --template=./nbconvert.tpl