如何将IPython笔记本转换为带有折叠输出（和/或输入）的HTML

Question

我有一个ipython笔记本想要分享给没有安装ipython的同事。

所以我使用以下方式将其转换为html：

ipython nbconvert my_notebook.ipynb

但是我的问题是输出的内容很长，阅读起来很困难，我想知道在html版本中是否有折叠或滚动选项，类似于笔记本查看器上的选项。基本上，我想要这个：输出示例 但在html版本中。这是可能的吗？谢谢帮助！

- jrjc

Answer 1

我通过这篇博客找到了我想要的东西，它正是我所需要的。

我稍作修改以使其与ipython 2.1 [编辑：也适用于Jupyter]兼容，并混合使用输入和输出隐藏技巧。

它是什么：

打开html文件时，所有输入都将显示，而输出则被隐藏。单击输入字段将显示输出字段。一旦你拥有了两个字段，你可以通过点击其中一个来隐藏另一个。

编辑：现在它会隐藏长输入，大约会显示一行（默认情况下）。你可以通过点击输入编号来显示所有内容。当你没有输出时（比如想要在HTML文档中隐藏一个长函数的定义）这非常方便。

在nbconvert过程中，您需要添加模板：

ipython nbconvert --template toggle my_notebook.ipynb

toggle是一个包含以下内容的文件：

{%- extends 'full.tpl' -%}

{% block output_group %}
<div class="output_hidden">
{{ super() }}
</div>
{% endblock output_group %}

{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}

{%- block input -%}
<div class="in_container">
<div class="in_hidden">
{{ super() }}
<div class="gradient">
</div>
</div>
</div>
{%- endblock input -%}


{%- block header -%}
{{ super() }}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
div.output_wrapper {
  margin-top: 0px;
}
.output_hidden {
  display: block;
  margin-top: 5px;
}
.in_hidden {
   width: 100%;
   overflow: hidden;
   position: relative;
}

.in_container {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
}

.gradient {
    width:100%;
    height:3px;  
    background:#eeeeee;
    position:absolute;
    bottom:0px;
    left:0;
    display: none;
    opacity: 0.4;
    border-bottom: 2px dashed #000;
}
div.input_prompt {
    color: #178CE3;
    font-weight: bold;
}
div.output_prompt {
    color: rgba(249, 33, 33, 1);
    font-weight: bold;
}
</style>

<script>
$(document).ready(function(){
  $(".output_hidden").click(function(){
      $(this).prev('.input_hidden').slideToggle();
  });
  $(".input_hidden").click(function(){
      $(this).next('.output_hidden').slideToggle();
  });
var slideHeight = 25;
$(".in_container").each(function () {
    var $this = $(this);
    var $in_hidden = $this.children(".in_hidden");
    var defHeight = $in_hidden.height();
    if (defHeight >= 61) {
        var $prompt = $this.prev(".input_prompt");
        var $gradient = $in_hidden.children(".gradient");
        $in_hidden.css("height", slideHeight + "px");
        $gradient.css("display", "block");
        $prompt.click(function () {
            var curHeight = $in_hidden.height();
            if (curHeight == slideHeight) {
                $in_hidden.animate({
                    height: defHeight
                }, "normal");
                $gradient.fadeOut();
            } 
            else {
                $in_hidden.animate({
                    height: slideHeight
                }, "normal");
                $gradient.fadeIn();
            }
            return false;
        });
    }
});
});

</script>
{%- endblock header -%}

基本上，您可以注入任何JavaScript和CSS来自定义您的笔记本！祝您玩得开心！

- jrjc

---

链接已更改为http://damianavila.github.io/blog/posts/mimic-the-ipython-notebook-cell-execution.html。 - ajp619

Answer 2

Ipython 2.0 现在在笔记本中直接包含将保存为 HTML 的功能。

滚动条在旧版本中是自动创建的，当行数>100时。文档 如果它们仍然显示，您的 HTML 输出也应该有滚动条，不是吗？

- Union find

---

嗯，我有Ipython 2.1，可能是这个原因，但是在Firefox上自动滚动似乎被禁用了。“由于其滚动行为中的错误，Firefox禁用了长输出的自动折叠。有关详细信息，请参见PR＃2047。”（来自您的链接） - jrjc

尝试使用3.0版本，在Chrome中保存？ - Union find

3.0仍在开发中，我找到了一个解决方案。谢谢。 - jrjc

我犯了一个错误——2.0版本包括从笔记本下载到HTML。不过你似乎已经设置好了。 - Union find

请注意，我为大型表格实现了水平滚动行为（无需任何JavaScript）。 - jrjc

Answer 3

您可以使用以下代码将笔记本转换为折叠式 HTML 代码。

from IPython.display import HTML

HTML('''<script>
code_show=true; 
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 } else {
 $('div.input').show();
 }
 code_show = !code_show
} 
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input type="submit" value="Click here to toggle on/off the raw code."></form>''')

- Tanveer