nbviewerで視覚化されたipythonノートブックのセルからコードを非表示にする方法は？

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から直接実行できるようになりました。コンテンツは、組み込みのテンプレートエクスポータの除外オプションを使用してフィルタリングできます。例えば：

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

「入力コード」セル、つまりコード自体を除外します。同様のオプションプロンプト、マークダウンセル、出力、または入力と出力の両方を除外するためのがあります。

（これらのオプションは、出力形式に関係なく機能するはずです。）

私はnbextensions（https://github.com/ipython-contrib/IPython-notebook-extensions）hide_input_allから使用します。方法は次のとおりです。

1. IPythonディレクトリの場所を確認します。

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

2. nbextensionsをダウンロードして、IPythonディレクトリに移動します。

3. IPythonディレクトリのどこかにあるcustom.jsファイルを編集して（私のプロファイルはprofile_default / static / customにありました）、nbextensionsディレクトリのcustom.example.jsのようにし ます。

4. 次の行をcustom.jsに追加します。

   IPython.load_extensions('usability/hide_input_all')

IPython Notebookには、ワークブックに関係なく、コードセルを切り替えるボタンがあります。

最新のIPythonノートブックバージョンでは、マークダウンセルでJavaScriptを実行できなくなったため、次のJavaScriptコードで新しいマークダウンセルを追加しても、コードセルを非表示にできなくなります（このリンクを参照）

〜/ .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投稿にリンクしていますが、クリスの解決策はここにはありません！（クリス、どこにいるの？）

これは基本的には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にエクスポートします。ノートブックの上部に、コードを表示または非表示にするトグルボタンがあります。

クリスもここで例を提供します。

これが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のコードが表示されます。

余談ですが、このコードの多くは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ノートブック出力がレンダリングされます。ただし、入力コードを表示できることに注意してください。ノートブックをコピーし、必要に応じてこのコードを追加して、コードを表示する必要のない人と共有することができます。

from IPython.display import HTML

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

セルをマークダウンに変換し、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で説明されているように「[It]は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関数を使用する
• $記号をエスケープします（そうでない場合、変数と見なされます）

ここに、プレゼンテーション用のJpuyter（新しいIPython）ノートブックを洗練する方法に関する素晴らしい記事（@Kenが投稿した同じ記事）があります。JavaScript、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.XXでChrisのメソッドが機能することを保証することもできます

ブラウザのコンソールを使用する非常に簡単なソリューション。これをブラウザコンソールにコピーし、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