在编辑界面和导出的 html 中显示/隐藏 Jupyter Notebook 代码单元格的脚本

Question

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

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

Answer 1

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

Answer 2

我会使用 nbextensions （https://github.com/ipython-contrib/IPython-notebook-extensions）中的hide_input_all。以下是：

找出您的IPython目录的位置：

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

下载 nbextensions 并将其移至IPython目录。
在IPython目录中的某处编辑 custom.js 文件在 profile_default / static / custom ）中类似于 nbextensions 目录中的 custom.example.js 。

将此行添加到 custom.js ：

IPython.load_extensions('usability/hide_input_all')

IPython Notebook现在有一个按钮来切换代码单元格，无论工作簿如何。

Answer 3

现在可以从版本5.2.1开始直接使用nbconvert：可以使用内置的template exporter exclude options过滤内容。例如：

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

将排除“输入代码”单元格，即代码本身。存在Similar options以排除提示，降价单元格或输出，或输入和输出。

（无论输出格式如何，这些选项都应该有效。）

Answer 4

最新的IPython笔记本版本不再允许在降价格单元格中执行javascript，因此使用以下javascript代码添加新的降价单元格将无法再隐藏您的代码单元格（请参阅this link）

更改〜/ .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>")
});

Answer 5

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

以下内容位于笔记本顶部的代码单元格中：

class Program
{
    static void Main(string[] args)
    {
        XNamespace ns = "https://mws.amazonservices.com/Orders/2013-09-01";

        var xml1 = XDocument.Load("Orderlist.xml");
        var xml2 = XDocument.Load("Orderlist2.xml");

        xml1.Descendants(ns + "ListOrderItemsResult").LastOrDefault().AddAfterSelf(xml2.Descendants(ns + "ListOrderItemsResult"));
        xml1.Save("Orderlist.xml");
    }
}

您可以看到an example of how this looks in NBviewer here。

更新：这对Jupyter中的Markdown单元格有一些有趣的行为，但它在笔记本的HTML导出版本中运行良好。

Answer 6

提供了一个很好的解决方案 here适用于导出为HTML的笔记本。该网站甚至链接到这个SO帖子，但我没有看到Chris的解决方案！（克里斯，你在哪里？）

这与harshil接受的答案基本相同，但它的优点是可以在导出的HTML中隐藏切换代码本身。我也喜欢这种方法避免了对IPython HTML功能的需求。

要实现此解决方案，请将以下代码添加到笔记本顶部的“Raw 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。笔记本顶部会有一个切换按钮来显示或隐藏代码。

Chris还提供了一个示例here。

我可以验证这是否适用于Jupyter 5.0.0

<强>更新：显示/隐藏div.prompt元素以及div.input元素也很方便。这会删除In [##]:和Out: [##]文字，并减少左边的边距。

Answer 7

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

# 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"

Answer 8

This will render an IPython notebook output. However, you will note be able to view the input code. You can copy a notebook, then add this code if needed to share with someone who does not need to view the code.

from IPython.display import HTML

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

Answer 9

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

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

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

Answer 10

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

jupyter nbconvert yourNotebook.ipynb 这部分代码将采用jupyter笔记本的乳胶文件格式，并将其转换为html

--no-input这就像我们在转换过程中所说的不添加任何输入的参数：此处单元格的输入是代码。因此我们将其隐藏

--no-prompt这里我们也要说的是，在转换过程中，不要在最终HTML文件中显示任何形式的提示，如错误或警告，这样html将只具有Text和以报告!! ..

希望它会有所帮助：）

Answer 11

已接受的解决方案也适用于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函数
转义$符号（否则视为变量）

Answer 12

以下是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所述：＆＃34; [它]在ipython笔记本工具栏上添加一个按钮来隐藏/显示输入代码单元格。要使用它，您必须将custom.js文件放在.ipython_<profile name>/static/custom/文件夹中，其中是正在使用的ipython配置文件。＆＃34;

我自己的评论：我验证了这个解决方案，它适用于iPython 3.1.0。

Answer 13

这可以通过使用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)行移动到页面底部的单独代码单元中即可：

Answer 14

在编辑界面和导出的 html 中显示/隐藏 Jupyter Notebook 代码单元格的脚本

只需将此代码放在第一个单元格中并运行它：

%%HTML 
<script>
    function luc21893_refresh_cell(cell) {
        if( cell.luc21893 ) return;
        cell.luc21893 = true;
        console.debug('New code cell found...' );
        
        var div = document.createElement('DIV');            
        cell.parentNode.insertBefore( div, cell.nextSibling );
        div.style.textAlign = 'right';
        var a = document.createElement('A');
        div.appendChild(a);
        a.href='#'
        a.luc21893 = cell;
        a.setAttribute( 'onclick', "luc21893_toggle(this); return false;" );

        cell.style.visibility='hidden';
        cell.style.position='absolute';
        a.innerHTML = '[show code]';        
                
    }
    function luc21893_refresh() {                
        if( document.querySelector('.code_cell .input') == null ) {            
            // it apeears that I am in a exported html
            // hide this code
            var codeCells = document.querySelectorAll('.jp-InputArea')
            codeCells[0].style.visibility = 'hidden';
            codeCells[0].style.position = 'absolute';                        
            for( var i = 1; i < codeCells.length; i++ ) {
                luc21893_refresh_cell(codeCells[i].parentNode)
            }
            window.onload = luc21893_refresh;
        }                 
        else {
            // it apperas that I am in a jupyter editor
            var codeCells = document.querySelectorAll('.code_cell .input')
            for( var i = 0; i < codeCells.length; i++ ) {
                luc21893_refresh_cell(codeCells[i])
            }            
            window.setTimeout( luc21893_refresh, 1000 )
        }        
    }
    
    function luc21893_toggle(a) {
        if( a.luc21893.style.visibility=='hidden' ) {
            a.luc21893.style.visibility='visible';        
            a.luc21893.style.position='';
            a.innerHTML = '[hide code]';
        }
        else {
            a.luc21893.style.visibility='hidden';        
            a.luc21893.style.position='absolute';
            a.innerHTML = '[show code]';
        }
    }
    
    luc21893_refresh()
</script>

编辑器中的示例

导出的 HTML 示例

Answer 15

（纸张）打印或另存为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%;。

Answer 16

使用上面的所有解决方案，即使你隐藏了代码，你仍然会得到你可能不想要的[<matplotlib.lines.Line2D at 0x128514278>]垃圾。

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

Answer 17

Here是一篇很好的文章（同一篇@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>

我也可以保证克里斯的方法在jupyter 4.X.X中工作。

Answer 18

将单元格转换为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>

Answer 19

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

Answer 20

用于将笔记本导出为不带代码单元格的HTML的简单编程解决方案（仅输出）：将此代码添加到要导出的笔记本my_notebook.ipynb的代码单元中：

import codecs
import nbformat
import time
from IPython.display import Javascript
from nbconvert import HTMLExporter

def save_notebook():
    display(
        Javascript("IPython.notebook.save_notebook()"),
        include=['application/javascript']
    )    

def html_export_output_only(read_file, output_file):
    exporter = HTMLExporter()
    exporter.exclude_input = True
    output_notebook = nbformat.read(read_file, as_version=nbformat.NO_CONVERT)
    output, resources = exporter.from_notebook_node(output_notebook)
    codecs.open(output_file, 'w', encoding='utf-8').write(output)


# save notebook to html
save_notebook()
time.sleep(1)
output_file = 'my_notebook_export.html'
html_export_output_only("my_notebook.ipynb", output_file)

Answer 21

很多时候，我们在编写长代码时需要隐藏部分代码。

示例：- 只需点击“代码显示/隐藏”，我们就可以隐藏 3 行代码。

所以这是您需要定义的函数，用于部分隐藏部分代码，然后在您想隐藏某些代码时调用它：

jQuery(document).ready(function ($) {

        var ajaxManager = $.manageAjax.create('cacheQueue', {
            queue: true,
            cacheResponse: true
        });
    
// Tooltip Script

        $('*[data-id]').tooltip({
            tooltipClass: "tooltipitem",
            content: '<div class="loading">Laden...</p>',
            hide: {
                effect: "slide",
                delay: "100000"
      },
      position: {
         my: "left+153 top+20",
         collision: "flipfit"
        },
        });


        $('*[data-id]').each(function () {

            let $tooltip = $(this);
            let id = $tooltip.attr("data-id");

            ajaxManager.add({
                url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
                type: "GET",
                cache: "true",
                data: {
                    "var": id,
                },

                success: function (data) {

                    let $content = $(data);
                    let title = $content.siblings('[class^=item-titletl]').text()
                    let icon = $content.siblings('[class^=parent2]').html()

                    $tooltip.tooltip({

                        content: function () {
        
                                return [data];  
                        },
                    });
          setTimeout(AdAndRemoveClass,500);
                    $tooltip.attr("title", "=")
          console.log($tooltip)
          $("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/                       >" + title + "</>").appendTo($tooltip);
                    
                }
            });
        });
    });
  
  function AdAndRemoveClass(){

var tool= $('.ui-tooltip-content');
if(tool.length ==0){
  setTimeout(AdAndRemoveClass,500);
}
else{
          console.log(tool)
          tool.addClass('ui-tooltip-content2');
          tool.removeClass('ui-tooltip-content');
          }
  }

一旦我们准备好函数定义，我们的下一个任务就很简单了。只是我们需要调用函数来隐藏/显示代码。

from IPython.display import HTML

def hide_toggle(for_next=False):
    this_cell = """$('div.cell.code_cell.rendered.selected')""" ; next_cell = this_cell + '.next()';
    toggle_text = 'Code show/hide'  # text shown on toggle link
    target_cell = this_cell ;  js_hide_current = '' 

    if for_next:
        target_cell = next_cell; toggle_text += ' next cell';
        js_hide_current = this_cell + '.find("div.input").hide();'
    js_f_name = 'code_toggle_{}'.format(str(random.randint(1,2**64)))

    html = """<script>
            function {f_name}() {{{cell_selector}.find('div.input').toggle(); }}
            {js_hide_current}
        </script>
        <a href="javascript:{f_name}()">{toggle_text}</a>
    """.format(f_name=js_f_name,cell_selector=target_cell,js_hide_current=js_hide_current, toggle_text=toggle_text )
    return HTML(html)

如何隐藏使用nbviewer可视化的ipython笔记本中的单元格中的代码？

21 个答案:

在编辑界面和导出的 html 中显示/隐藏 Jupyter Notebook 代码单元格的脚本

编辑器中的示例

导出的 HTML 示例