<details></details> HTML5 下拉字符未在 Jupyter 中显示

Question

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

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

看看这个（火狐）：

在 Chrome 中：

Answer 1

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

summary {
  display: block;
}

..添加到 HTML output。

要解决此问题，必须将以下代码添加到转换后的 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 笔记本转换为 HTML 文件时使用它：

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