[javascript] nbviewer로 시각화 된 ipython 노트북의 셀에서 코드를 숨기는 방법은 무엇입니까?

이것은 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)페이지 맨 아래에있는 별도의 코드 셀로 행을 이동 하십시오.

답변

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