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

"입력 코드"셀, 즉 코드 자체는 제외합니다. 프롬프트, 마크 다운 셀 또는 출력 또는 입력과 출력을 모두 제외하는 유사한 옵션 이 있습니다 .

이러한 옵션은 출력 형식에 관계없이 작동해야합니다.

내가 사용하는 것이 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 노트북 버전은 더 이상 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 내보내기 버전의 노트북에서는 정상적으로 작동합니다.

이것은 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의 코드 표시 / 숨김을 토글하기 위해 다음과 같은 버튼이 생성되며 기본값은 "숨기기"상태입니다.

"show"상태로 설정하면 Jupyter Notebook의 코드를 볼 수 있습니다.

또한이 코드의 대부분은 노트북의 시작 부분에 배치해야하지만 토글 버튼의 ​​위치는 선택 사항입니다. 개인적으로 문서 하단에 보관하는 것을 선호합니다. 이렇게하려면 display(button)페이지 맨 아래에있는 별도의 코드 셀로 행을 이동 하십시오.

여기에는 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는 여기 에 예제를 제공합니다 .

Jupyter 5.0.0에서 작동하는지 확인할 수 있습니다.

업데이트 : div.prompt요소와 함께 요소 를 표시하거나 숨기는 것도 편리합니다 div.input. 그러면 In [##]:및 Out: [##]텍스트가 제거되고 왼쪽의 여백이 줄어 듭니다.

인쇄 된 문서 또는 보고서를 더 잘 표시하려면 버튼도 제거하고 특정 코드 블록을 표시하거나 숨길 수 있어야합니다. 여기 내가 사용하는 것이 있습니다 (간단히 첫 번째 셀에 복사하여 붙여 넣기).

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

셀을 Markdown으로 변환 <details>하고 예제와 같이 HTML5 태그를 사용 하십시오 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이 게시 한 기사)입니다. 자바 스크립트에서 노트북의 파이썬 커널과 통신하는 기능을 포함하여 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>

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