[英]<details></details> HTML5 drop-down character not shown in Jupyter HTML nbconverted files in Firefox
This issue has caused me some headaches.这个问题让我有些头疼。 For a jupyter lab workshop, we used <details></details>
to provide more information on click.对于 jupyter 实验室研讨会,我们使用<details></details>
来提供有关点击的更多信息。
However, when the notebook was converted to HTML via nbconvert, the drop-down arrows would only show in Chrome, not Firefox.但是,当笔记本通过 nbconvert 转换为 HTML 时,下拉箭头只会在 Chrome 中显示,而不是 Firefox。
This is caused by the following Bootstrap element..这是由以下 Bootstrap 元素引起的。
summary {
display: block;
}
..which is added to the HTML output. ..添加到 HTML output。
To fix the issue, the following code must be added to the converted HTML:要解决此问题,必须将以下代码添加到转换后的 HTML:
<style type="text/css">
/* Fix details summary arrow
not shown in Firefox
due to bootstrap
display: block;
*/
summary {
display: list-item;
}
</style>
It is possible to create a nbconvert template that adds this automatically.可以创建一个自动添加它的 nbconvert 模板。
Create the a file called nbconvert.tpl
with the following contents:创建一个名为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 %}
And use it when converting jupyter notebooks to HTML files:并在将 jupyter 笔记本转换为 HTML 文件时使用它:
jupyter nbconvert --to html \
--output-dir=. ./notebook.ipynb \
--template=./nbconvert.tpl
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.