调整单个 jupyter notebook 单元格的高度答案

【问题标题】：Adjust the height of individual jupyter notebook cells调整单个 jupyter notebook 单元格的高度
【发布时间】：2018-09-04 01:54:46
【问题描述】：

custom.css 非常适合调整 jupyter 笔记本的宽度（以及我们使用它时的 font size..）：

.container { width:100% !important; height: 200px; }
.CodeMirror pre {font-family: Monaco; font-size: 9pt;}

height 单元格比较棘手，因为我们不希望所有单元格都变得过高。

这是一个单元格“想要”更多垂直空间的示例：

是否有按单元格的方法来实现这一点？这个问题实际上有两个部分：

【问题讨论】：

你想改变选定单元格的大小吗？如果不是，您要如何选择具有不同大小的单元格？
是问题per-cell approach中提到的逐个单元格高度变化
从阅读这个article看来，这个问题可以通过重写你的css和html文件来解决。同样从它的外观来看，您似乎必须在编写完所有单元格并确定哪些单元格需要更多高度后配置它们。
rewriting css and html 这很可能是目前需要的：这行不通，因为我需要自包含的.ipynb 文件与团队一起分发
即使是临时的 hack，.container { width:100% !important; height: 200px; } 也会产生奇怪的结果，因为它会调整标题/工具栏部分的大小并打乱滚动。很高兴看到这个问题的答案。

【解决方案1】：

这有点 hacky，但它的 python 风格可以使用 jquery 和一些 IPython 函数来完成，这些函数让您可以在单元格内执行 javascript 内联。

from IPython.display import display, HTML

这将使您可以从任何单元格中的任何位置执行 javascript，如下所示：

display(HTML("<script>alert('Hello, World!');</script>"))

然后我们将它与一些 jquery 和 Jupyter div 元素上的一些已知类混合，我们可以将执行单元格的 output_wrapper 大小更改为所需的大小：

display(HTML("<script>$('div.cell.selected').children('div.output_wrapper').height(50);</script>"))

如果您不想再次在该单元格中重新运行代码，请在要更改的单元格上方插入一个单元格并调整它以选择下一个单元格 div 并更新高度：

display(HTML("<script>$('div.cell.selected').next().height(100);</script>"))

如果需要在多个单元格上使用辅助函数，那么用辅助函数包装它们会很容易且值得。

当笔记本关闭或重新加载时，这显然不会保留。为此，您可以通过添加一个单元格元数据属性来改进这一点，然后在 custom.js 中添加一些根据需要读取和呈现的内容。

【讨论】：