时间戳

首页 > 解决方案 > Jupyter Notebook：隐藏/折叠一段文本作为“提示”

html - Jupyter Notebook：隐藏/折叠一段文本作为“提示”

问题描述

我正在使用 Jupyter Notebook 进行交互式编码演示。有一个练习块，用户应该在其中输入自己的代码来尝试解决问题。

我现在想提供一些进一步的说明，即提示如何解决问题，默认情况下应该隐藏。

我找到了这个答案，它链接到这里的网站，在原始 nbconvert 单元格中使用 JavaScript 来隐藏输出单元格。但是，这似乎只适用于导出的笔记本，而我想要笔记本本身的东西。所以我尝试将类似的 JS 添加到 Markdown 单元格中，但这不起作用，因为 JS 被清理掉了。

我不确定 CSS 是否也被清理了，但原始 HTML 可以工作。有没有一种创建隐藏/折叠文本段落的好方法，例如“单击此处获取更多说明”以显示文本？

到目前为止，我能想到的最好的方法是title创建鼠标悬停文本的属性，不幸的是没有进一步的格式化：

<span title="Instruction text goes here">Mouse over for further instructions</span>

标签： htmljupyter-notebookjupyter

解决方案

该<details>标记是纯 HTML，它就是这样做的，并且不会被 sanitizer 删除。它可以有一个<summary>描述折叠的内容。

<details>
<summary>Click here for instructions</summary>
Instructions go here
</details>

另请参阅：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

推荐阅读