如何从用nbviewer可视化的ipython Notebook中的单元格中隐藏代码？

我有一个使用NBviewer可视化的ipython / jupyter笔记本。

如何隐藏NBviewer渲染的笔记本中的所有代码，以便仅显示代码输出（例如，图和表格）和降价单元格？

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>''')

从5.2.1版开始，现在可以直接从nbconvert进行此操作：可以使用内置模板导出器的exclude选项过滤内容。例如：

jupyter nbconvert --to pdf --TemplateExporter.exclude_input=True my_notebook.ipynb

将排除“输入代码”单元格，即代码本身。存在类似的选项以排除提示，降价单元格或输出，或排除输入和输出。

（这些选项应该与输出格式无关。）

我hide_input_all将从nbextensions（https://github.com/ipython-contrib/IPython-notebook-extensions）使用。这是如何做：

1. 找出您的IPython目录在哪里：

   from IPython.utils.path import get_ipython_dir
   print get_ipython_dir()

2. 下载nbextensions并将其移至IPython目录。

3. 编辑您的custom.js在IPython的目录文件的地方（我是profile_default /静态/自定义），以类似于 custom.example.js在nbextensions目录。

4. 将此行添加到custom.js：

   IPython.load_extensions('usability/hide_input_all')

无论工作簿如何，IPython Notebook现在都将具有一个用于切换代码单元的按钮。

最新的IPython Notebook版本不再允许在markdown单元中执行javascript，因此，使用以下javascript代码添加新的markdown单元将无法再隐藏您的代码单元（请参阅此链接）

如下更改〜/ .ipython / profile_default / static / custom / custom.js：

code_show=true;
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 } else {
 $('div.input').show();
 }
 code_show = !code_show
}

$([IPython.events]).on("app_initialized.NotebookApp", function () {
  $("#view_menu").append("<li id=\"toggle_toolbar\" title=\"Show/Hide code cells\"><a href=\"javascript:code_toggle()\">Toggle Code Cells</a></li>")
});

我编写了一些代码来完成此任务，并添加了一个按钮来切换代码的​​可见性。

笔记本顶部的代码单元中包含以下内容：

from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di # Example: di.display_html('<h3>%s:</h3>' % str, raw=True)

# This line will hide code by default when the notebook is exported as HTML
di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

# This line will add a button to toggle visibility of code blocks, for use with the HTML export version
di.display_html('''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Toggle code</button>''', raw=True)

您可以在NBviewer中看到一个示例。

更新： Jupyter中的Markdown单元格将具有一些有趣的行为，但是在笔记本的HTML导出版本中可以正常工作。

这里提供了一个很好的解决方案，该解决方案 非常适合导出到HTML的笔记本。该网站甚至链接回此SO帖子，但我在这里看不到Chris的解决方案！（克里斯，你在哪里？）

基本上，此方法与从名单上接受的苛刻答案是相同的解决方案，但是它具有将切换代码本身隐藏在导出的HTML中的优点。我也喜欢这种方法，避免了使用IPython HTML函数的需要。

要实现此解决方案，请将以下代码添加到笔记本顶部的“原始NBConvert”单元中：

<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show Code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()">
  <input type="submit" id="toggleButton" value="Show Code">
</form>

然后只需将笔记本导出为HTML。笔记本顶部将有一个切换按钮，以显示或隐藏代码。

克里斯在这里也提供了一个例子。

我可以验证它在Jupyter 5.0.0中是否有效

更新：还可以方便地显示/隐藏div.prompt元素以及div.input元素。这将删除In [##]:和Out: [##]文本，并减少左侧的边距。

可以使用IPython ToggleButton小部件和少量JavaScript来完成。以下代码应放在文档顶部的代码单元中：

import ipywidgets as widgets
from IPython.display import display, HTML

javascript_functions = {False: "hide()", True: "show()"}
button_descriptions  = {False: "Show code", True: "Hide code"}


def toggle_code(state):

    """
    Toggles the JavaScript show()/hide() function on the div.input element.
    """

    output_string = "<script>$(\"div.input\").{}</script>"
    output_args   = (javascript_functions[state],)
    output        = output_string.format(*output_args)

    display(HTML(output))


def button_action(value):

    """
    Calls the toggle_code function and updates the button description.
    """

    state = value.new

    toggle_code(state)

    value.owner.description = button_descriptions[state]


state = False
toggle_code(state)

button = widgets.ToggleButton(state, description = button_descriptions[state])
button.observe(button_action, "value")

display(button)

这将创建以下按钮，以切换显示/隐藏Jupyter Notebook的代码，默认为“隐藏”状态：

设置为“显示”状态后，您可以查看Jupyter Notebook的代码：

顺便说一句，尽管大部分代码应放在笔记本的开头，但切换按钮的位置是可选的。就个人而言，我更喜欢将其保留在文档的底部。为此，只需将display(button)行移动到页面底部的单独的代码单元中：

为了更好地显示打印的文档或报告，我们还需要删除按钮，以及显示或隐藏某些代码块的功能。这是我使用的方法（只需将其复制粘贴到您的第一个单元格中）：

# This is a cell to hide code snippets from displaying
# This must be at first cell!

from IPython.display import HTML

hide_me = ''
HTML('''<script>
code_show=true; 
function code_toggle() {
  if (code_show) {
    $('div.input').each(function(id) {
      el = $(this).find('.cm-variable:first');
      if (id == 0 || el.text() == 'hide_me') {
        $(this).hide();
      }
    });
    $('div.output_prompt').css('opacity', 0);
  } else {
    $('div.input').each(function(id) {
      $(this).show();
    });
    $('div.output_prompt').css('opacity', 1);
  }
  code_show = !code_show
} 
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input style="opacity:0" type="submit" value="Click here to toggle on/off the raw code."></form>''')

然后在下一个单元格中：

hide_me
print "this code will be hidden"

和

print "this code will be shown"

这将呈现一个IPython Notebook输出。但是，您将注意到能够查看输入代码。您可以复制一个笔记本，然后添加此代码（如果需要）与不需要查看代码的人共享。

from IPython.display import HTML

HTML('''<script> $('div .input').hide()''')

将单元格转换为Markdown并使用HTML5 <details>标签，如示例中所示joyrexus：

https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f

## collapsible markdown?

<details><summary>CLICK ME</summary>
<p>

#### yes, even hidden code blocks!

```python
print("hello world!")
```

</p>
</details>

这是p3trus建议的另一种解决方案：

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
        {
             'label'   : 'toggle input cells',
             'icon'    : 'icon-refresh', 
             'callback': function(){$('.input').slideToggle()}
        }
    ]);
});

如p3trus所述：“ [[它]向ipython笔记本工具栏添加了一个按钮，以隐藏/显示输入代码单元。要使用它，必须将custom.js文件放在.ipython_<profile name>/static/custom/文件夹中， 是正在使用的ipython配置文件。”

我自己的意见：我验证了此解决方案，并且可以在iPython 3.1.0上使用。

接受的解决方案还可以在julia Jupyter / IJulia中进行以下修改：

display("text/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>""")

特别注意：

• 使用display功能
• 转义$符号（否则视为变量）

这是一篇不错的文章（与@Ken发表的文章相同），涉及如何完善Jpuyter（新的IPython）笔记本以进行演示。有无数种使用JS，HTML和CSS扩展Jupyter的方法，包括通过javascript与笔记本的python内核进行通信的能力。有魔术装饰器%%HTML，%%javascript因此您可以自己在单元格中执行以下操作：

%%HTML
<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show Code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()"><input type="submit" id="toggleButton" value="Show Code"></form>

我也可以证明Chris的方法在jupyter 4.XX中有效

使用浏览器的控制台非常简单的解决方案。您将此复制到浏览器控制台中，然后按Enter：

$("div.input div.prompt_container").on('click', function(e){
    $($(e.target).closest('div.input').find('div.input_area')[0]).toggle();
});

然后，您只需单击单元格输入的数量即可切换单元格的代码。

（纸）打印或另存为HTML

对于那些希望打印到纸上的输出，仅上述答案似乎并不能给出很好的最终输出。但是，采用@Max Masnick的代码并添加以下内容，可以将其打印在完整的A4页上。

from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di

di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

CSS = """#notebook div.output_subarea {max-width:100%;}""" #changes output_subarea width to 100% (from 100% - 14ex)
HTML('<style>{}</style>'.format(CSS))

缩进的原因是Max Masnick删除了提示部分，这意味着所有内容都移至输出的左侧。但是，这对于限制为的最大输出宽度没有任何作用max-width:100%-14ex;。这会将output_subarea的最大宽度更改为max-width:100%;。

使用以上所有解决方案，即使您隐藏了代码，您仍然可以获得 [<matplotlib.lines.Line2D at 0x128514278>]您可能不想要的东西。

如果您实际上想摆脱输入而不只是隐藏输入，我认为最干净的解决方案是将图形保存到磁盘中隐藏的单元格中，然后使用例如在Markdown单元格中包含图像![Caption](figure1.png)。

jupyter nbconvert testing.ipynb --to html --no-input

jupyter nbconvert yourNotebook.ipynb --no-input --no-prompt