web-dev-qa-db-ja.com

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

NBviewerを使用して視覚化するipython/jupyterノートブックがあります。

コードの出力（プロットやテーブルなど）とマークダウンセルのみが表示されるように、NBviewerによってレンダリングされたノートブックからすべてのコードを非表示にするにはどうすればよいですか？

javascriptipythonipython-notebook
105
lucacerone
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>''')
177
harshil

私はnbextensionsからhide_input_allを使用します（- 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. IPythonディレクトリのどこかにcustom.jsファイルを編集します（私のものはprofile_default/static/customにあります） custom.example.js（nbextensionsディレクトリ）.

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

    IPython.load_extensions('usability/hide_input_all')

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

19
user394430

これは、バージョン 5.2.1 の時点でnbconvertから直接可能になりました。コンテンツは、組み込みの template exporter exclude options を使用してフィルタリングできます。例えば：

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

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

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

18
Noah

最新の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>")
});
15
user4284784

これを実現するコードをいくつか作成し、コードの可視性を切り替えるボタンを追加しました。

以下は、ノートブックの上部にあるコードセルに入力します。

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エクスポートバージョンでは正常に動作します。

8
Max Masnick

here が提供されているニースのソリューションがあり、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にエクスポートするだけです。ノートブックの上部に、コードを表示または非表示にするトグルボタンがあります。

クリスはまた例を提供します here 。

これがJupyter 5.0.0で機能することを確認できます

Update：div.Prompt要素とともにdiv.input要素を表示/非表示することも便利です。これにより、In [##]:およびOut: [##]テキストが削除され、左側のマージンが減少します。

6
Ken

印刷されたドキュメントまたはレポートでより適切に表示するには、ボタンも削除する必要があり、特定のコードブロックを表示または非表示にする機能も必要です。私が使用するものは次のとおりです（これを最初のセルにコピーアンドペーストするだけです）。

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

これにより、IPythonノートブック出力がレンダリングされます。ただし、入力コードを表示できることに注意してください。ノートブックをコピーし、必要に応じてこのコードを追加して、コードを表示する必要のない人と共有できます。

from IPython.display import HTML

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

基本的なiPythonノートブックを拡張するRuntoolsを使用します。

https://github.com/ipython-contrib/IPython-notebook-extensions/wiki/Runtools

3
Petr

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ノートブックツールバーに追加して、入力コードセルを非表示/表示します。使用するには、.ipython_<profile name>/static/custom/フォルダーにcustom.jsファイルを配置する必要があります、使用中のipythonプロファイルはどこにありますか。」

私自身のコメント：このソリューションを検証し、iPython 3.1.0で動作します。

1
akhmed

受け入れられたソリューションは、次の変更を加えた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関数を使用します
  • $記号をエスケープします（そうでなければ変数として表示されます）
1
gozzilli

これは、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ノートブックのコードの表示/非表示を切り替える次のボタンが作成されます。デフォルトでは「非表示」状態になっています。

Hide code state

「show」状態に設定すると、Jupyter Notebookのコードを確認できます。

Show code state

余談ですが、このコードの多くはノートブックの先頭に配置する必要がありますが、トグルボタンの場所はオプションです。個人的には、ドキュメントの下部に保管することを好みます。そのためには、単にdisplay(button)行をページの下部にある別のコードセルに移動します。

Relocated toggle button

1
Erick Shepherd

コードを非表示にしている場合でも上記のすべてのソリューションを使用すると、おそらく不要な[<matplotlib.lines.Line2D at 0x128514278>]が表示されます。

実際に入力を非表示にするのではなく削除したい場合、最もクリーンな解決策は、数字を非表示のセルのディスクに保存し、Markdownセルに画像を含めることです。 ![Caption](figure1.png)。

0
maxymoo

（紙）印刷または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によって削除されたPromptセクションが、出力時にすべてが左にシフトすることを意味するためです。ただし、これは、max-width:100%-14ex;に制限された出力の最大幅に対しては何もしませんでした。これにより、output_subareaの最大幅がmax-width:100%;に変更されます。

0
Little Bobby Tables

セルをMarkdownに変換し、joyrexusの例のようにHTML5 <details>タグを使用します。

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>
0
Valentas

ここ は、プレゼンテーション用にJpuyter（新しいIPython）ノートブックを洗練する方法に関する素晴らしい記事（@Kenが投稿したもの）です。 JavaScript、ノートブックのpythonカーネルと通信する機能など、JS、HTML、CSSを使用してJupyterを拡張する方法は無数にあります。 %%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.X.Xで動作することを保証することもできます。

0
ThisGuyCantEven