วิธีการซ่อนรหัสจากเซลล์ในสมุดบันทึก ipython ที่แสดงด้วย nbviewer?

ฉันมีสมุดบันทึก ipython / jupyter ที่ฉันเห็นภาพโดยใช้ NBviewer

ฉันจะซ่อนรหัสทั้งหมดจากสมุดบันทึกที่แสดงโดย NBviewer ดังนั้นเฉพาะผลลัพธ์ของรหัส (เช่นพล็อตและตาราง) และเซลล์ markdown เท่านั้นที่จะแสดง

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

ตอนนี้สามารถทำได้โดยตรงจาก nbconvert ในเวอร์ชัน5.2.1 : สามารถกรองเนื้อหาได้โดยใช้ตัวเลือกไม่รวมตัวส่งออกเทมเพลตในตัวตัวเลือกแม่แบบส่งออกยกเว้นตัวอย่างเช่น:

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 / static / custom ) เพื่อให้คล้ายกับ custom.example.jsในไดเรกทอรีnbextensions

4. เพิ่มบรรทัดนี้ในcustom.js :

   IPython.load_extensions('usability/hide_input_all')

IPython Notebook จะมีปุ่มเพื่อสลับเซลล์โค้ดไม่ว่าสมุดงานจะเป็นอย่างไร

รุ่นโน๊ตบุ๊ค IPython รุ่นใหม่ล่าสุดไม่อนุญาตให้เรียกใช้จาวาสคริปต์ในเซลล์ markdown อีกต่อไปดังนั้นการเพิ่มเซลล์ 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 ที่นี่

ปรับปรุง:สิ่งนี้จะมีพฤติกรรมตลก ๆ กับเซลล์ Markdown ใน Jupyter แต่ทำงานได้ดีในโน้ตบุ๊กรุ่นส่งออก HTML

สิ่งนี้สามารถทำได้โดยใช้ToggleButtonวิดเจ็ตIPython และ 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 โดยค่าเริ่มต้นเป็นสถานะ "ซ่อน":

เมื่อตั้งค่าเป็นสถานะ "แสดง" คุณจะเห็นรหัสสำหรับ 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 จะมีปุ่มสลับที่ด้านบนของสมุดบันทึกเพื่อแสดงหรือซ่อนรหัส

คริสยังให้ตัวอย่างที่นี่ที่นี่

ฉันสามารถตรวจสอบว่ามันใช้งานได้ใน 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 และใช้ 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 : "[มัน] เพิ่มปุ่มลงในแถบเครื่องมือสมุดบันทึก 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ฟังก์ชั่น
• หนี$เครื่องหมาย (เห็นเป็นตัวแปร)

นี่เป็นบทความที่ดี (เช่นเดียวกับ @Ken ที่โพสต์) เกี่ยวกับวิธีการขัดเกลาสมุดบันทึก Jpuyter (IPython ใหม่) สำหรับการนำเสนอ มีวิธีนับไม่ถ้วนในการขยาย Jupyter โดยใช้ JS, HTML และ CSS รวมถึงความสามารถในการสื่อสารกับเคอร์เนล python ของโน้ตบุ๊กจาก javascript มีตกแต่งวิเศษสำหรับเป็น%%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.XX

ทางออกที่ง่ายมากโดยใช้ Console ของเบราว์เซอร์ คุณคัดลอกสิ่งนี้ลงในคอนโซลของเบราว์เซอร์แล้วกด 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