<details></details> HTML5 下拉字符未显示在 Firefox 中的 Jupyter HTML nbconvert 文件中答案

【问题标题】：<details></details> HTML5 drop-down character not shown in Jupyter HTML nbconverted files in Firefox<details></details> HTML5 下拉字符未显示在 Firefox 中的 Jupyter HTML nbconvert 文件中
【发布时间】：2021-01-07 06:16:24
【问题描述】：

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

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

看看这个（Firefox）：

在 Chrome 中：

【问题讨论】：

标签： html css jupyter nbconvert

【解决方案1】：

这是由以下 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 notebook 转换为 HTML 文件时使用它：

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

【讨论】：