Javascript 如何将ipython笔记本转换为具有折叠输出（和/或输入）的html

我有一个

ipython笔记本

我想与可能没有安装ipython的同事分享

因此，我使用以下方法将其转换为html：

ipython nbconvert my_notebook.ipynb

但我的问题是，我有很长的输出，这使得阅读困难，我想知道是否有可能在html版本上有笔记本查看器的折叠或滚动选项

基本上，我喜欢这样：

但是在html版本中。这可能吗

---

谢谢你的帮助

Ipython 2.0现在包括直接在笔记本中保存为HTML

---

在旧版本中，滚动条是自动创建的，行数大于100。如果它们仍然显示，您的html输出也应该有条形图，否？

我找到了我想要的东西，这要感谢它完全符合我的要求

我对它做了一些修改，使它能够与iPython2.1一起工作[edit:与Jupyter一起工作]，并混合了输入和输出隐藏技巧

它的作用是： 打开html文件时，将显示所有输入并隐藏输出。单击输入字段，将显示输出字段。一旦你有了这两个字段，你可以通过点击另一个来隐藏其中一个

编辑：它现在隐藏长输入，并且始终显示大约1行（通过defa。您可以通过单击输入编号来显示所有内容。这在您没有输出时非常方便（例如，您希望在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 -%}

{%-extends'full.tpl'-%}
{%block output_group%}
{{super（）}}
{%endblock输出\u组%}
{%block input_group-%}
{{super（）}}
{%endblock输入\组%}
{%-块输入-%}
{{super（）}}
{%-endblock输入-%}
{%-块头-%}
{{super（）}}
div.output\u包装器{
边际上限：0px；
}
.output_隐藏{
显示：块；
边缘顶部：5px；
}
.隐藏{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
.在集装箱内{
宽度：100%；
左边距：20px；
右边距：20px；
}
.梯度{
宽度：100%；
高度：3倍；
背景：#eeeeee；
位置：绝对位置；
底部：0px；
左：0；
显示：无；
不透明度：0.4；
边框底部：2个虚线#000；
}
div.input\u提示符{
颜色：#178CE3；
字体大小：粗体；
}
div.output\u提示符{
颜色：rgba（249,33,33,1）；
字体大小：粗体；
}
$（文档）.ready（函数（）{
$（“.output_hidden”）。单击（函数（）{
$（this）.prev（'.input_hidden'）.slideToggle（）；
});
$（“.input_hidden”）。单击（函数（）{
$（this）.next（'.output_hidden'）.slideToggle（）；
});
var SlidehHeight=25；
$（“.in_container”）。每个（函数（）{
var$this=$（this）；
var$in_hidden=$this.children（“.in_hidden”）；
var defHeight=$in_hidden.height（）；
如果（除高度>=61）{
var$prompt=$this.prev（“.input_prompt”）；
var$gradient=$in_hidden.children（“.gradient”）；
$in_hidden.css（“高度”，滑动高度+“px”）；
$gradient.css（“显示”、“块”）；
$prompt。单击（函数（）{
var curHeight=$in_hidden.height（）；
如果（curHeight==滑块高度）{
$in_hidden.animate({
高度：除雾高度
}“正常”）；
$gradient.fadeOut（）；
} 
否则{
$in_hidden.animate({
高度：滑块高度
}“正常”）；
$gradient.fadeIn（）；
}
返回false；
});
}
});
});
{%-endblock头-%}

基本上，你可以随意注入任何你想要定制笔记本的javascript和css

---

玩得开心！

您可以使用下面的代码将笔记本转换为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>''')

从IPython.display导入HTML
HTML（“”）
代码显示=真；
函数代码_toggle（）{
如果（代码显示）{
$（'div.input'）.hide（）；
}否则{
$（'div.input'）.show（）；
}
代码显示=！代码显示
} 
$（文档）.ready（代码切换）；
''')

mmh我有Ipython 2.1，所以可能是这样，但在Firefox上似乎禁用了自动滚动“在Firefox中，由于滚动行为中的错误，长输出的自动折叠被禁用。有关详细信息，请参阅PR#2047。”（来自您的链接）尝试3.0，在Chrome中保存？3.0仍在开发中，我找到了一个解决方案。ThanksI犯了一个错误——2.0包括从笔记本下载到html。不过您似乎已经设置好了。请注意，对于大型表，我有一个水平滚动行为，例如（我没有任何javascript）链接更改为