<details></details> HTML5 下拉字符未在 Jupyter 中显示 HTML nbconvert files in Firefox

Question

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

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

看看这个 (Firefox):

在Chrome:

Answer 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 notebooks 转换为 HTML 文件时使用它：

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

<details></details> HTML5 下拉字符未在 Jupyter 中显示 HTML nbconvert files in Firefox

<details></details> HTML5 drop-down character not shown in Jupyter HTML nbconverted files in Firefox

html

css

jupyter

nbconvert