İpython not defterinde nbviewer ile görselleştirilmiş hücrelerden kod nasıl gizlenir?

NBviewer kullanarak görselleştirdiğim bir ipython / jupyter not defterim var.

NBviewer tarafından oluşturulan not defterinden tüm kodu nasıl gizleyebilirim, böylece sadece kod çıktısı (örn. Grafikler ve tablolar) ve markdown hücreleri gösterilir?

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

Bu artık 5.2.1 sürümünden itibaren doğrudan nbconvert ile mümkündür : içerik, yerleşik şablon dışa aktarıcı hariç tutma seçenekleri kullanılarak filtrelenebilir . Örneğin:

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

"giriş kodu" hücrelerini, yani kodun kendisini hariç tutacaktır. Komut istemlerini, işaretleme hücrelerini veya çıktıları veya hem girdileri hem de çıktıları hariç tutmak için benzer seçenekler mevcuttur.

(Bu seçenekler, çıktı biçiminden bağımsız olarak çalışmalıdır.)

Ben kullanacağı hide_input_allgelen nbextensions ( https://github.com/ipython-contrib/IPython-notebook-extensions ). Bunu nasıl yapacağınız aşağıda açıklanmıştır:

1. IPython dizininizin nerede olduğunu bulun:

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

2. Nbextensions'ı indirin ve IPython dizinine taşıyın.

3. Senin Düzenleme custom.js ipython dizinindeki dosya yerde (mayın oldu profile_default / static / özel benzer olması) custom.example.js içinde nbextensions dizininde.

4. Bu satırı custom.js'ye ekleyin :

   IPython.load_extensions('usability/hide_input_all')
   

IPython Notebook artık çalışma kitabı ne olursa olsun kod hücrelerini değiştirmek için bir düğmeye sahip olacak.

En yeni IPython not defteri sürümü artık javascript'in markdown hücrelerinde çalıştırılmasına izin vermemektedir, bu nedenle aşağıdaki javascript koduyla yeni bir markdown hücresi eklemek kod hücrelerinizi gizlemek için artık çalışmayacaktır ( bu bağlantıya bakın )

~ / .İpython / profile_default / static / custom / custom.js 'yi aşağıdaki gibi değiştirin:

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>")
});

Bunu başaran bir kod yazdım ve kodun görünürlüğünü değiştirmek için bir düğme ekledim.

Aşağıdakiler, bir not defterinin üst kısmındaki bir kod hücresine gider:

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)

Görebilirsiniz bu burada NBviewer nasıl göründüğü bir örnek .

Güncelleme: Bu, Jupyter'deki Markdown hücrelerinde bazı komik davranışlar sergileyecek, ancak not defterinin HTML dışa aktarma sürümünde iyi çalışıyor.

Bu, bir IPython ToggleButtonwidget'ı ve biraz JavaScript kullanılarak yapılabilir. Aşağıdaki kod, belgenin üst kısmındaki bir kod hücresine yerleştirilmelidir:

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)

Bu, Jupyter Not Defteri için kodu gösterme / gizleme için aşağıdaki düğmeyi oluşturur, varsayılan olarak "gizle" durumuna getirilir:

"Göster" durumuna ayarlandığında, Jupyter Not Defterinin kodunu görebilirsiniz:

Bir kenara, bu kodun çoğu Defterin başına yerleştirilmelidir, ancak geçiş düğmesinin konumu isteğe bağlıdır. Şahsen ben onu belgenin altında tutmayı tercih ederim. Bunu yapmak için, display(button)satırı sayfanın altındaki ayrı bir kod hücresine taşımanız yeterlidir :

Burada sağlanan güzel bir çözüm var işler iyi için defter HTML ihraç söyledi. Web sitesi bu SO gönderisine geri dönüyor, ancak burada Chris'in çözümünü göremiyorum! (Chris, neredesin?)

Bu temelde harshil'den kabul edilen cevapla aynı çözümdür, ancak geçiş kodunun kendisini dışa aktarılan HTML'de gizleme avantajına sahiptir. Ayrıca bu yaklaşımın IPython HTML işlevi ihtiyacını ortadan kaldırması da hoşuma gidiyor.

Bu çözümü uygulamak için, not defterinizin üst kısmındaki bir 'Raw NBConvert' hücresine aşağıdaki kodu ekleyin:

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

Ardından not defterini HTML'ye aktarın. Kodu göstermek veya gizlemek için not defterinin üstünde bir geçiş düğmesi olacaktır.

Chris ayrıca burada bir örnek veriyor .

Bunun Jupyter 5.0.0'da çalıştığını doğrulayabilirim

Güncelleme : div.promptÖğeler ile birlikte öğeleri göstermek / gizlemek de uygundur div.input. Bu, In [##]:ve Out: [##]metnini kaldırır ve soldaki kenar boşluklarını azaltır.

Basılı belge veya raporla daha iyi görüntüleme için düğmeyi ve belirli kod bloklarını gösterme veya gizleme özelliğini de kaldırmamız gerekir. İşte kullandığım şey (bunu kopyalayıp ilk hücrenize yapıştırmanız yeterlidir):

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

Sonra sonraki hücrelerinizde:

hide_me
print "this code will be hidden"

ve

print "this code will be shown"

Bu bir IPython not defteri çıktısını oluşturacaktır. Ancak, giriş kodunu görüntüleyebileceğinizi fark edeceksiniz. Bir not defterini kopyalayabilir, ardından kodu görüntülemesi gerekmeyen biriyle paylaşmak için gerekirse bu kodu ekleyebilirsiniz.

from IPython.display import HTML

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

Hücreyi Markdown'a dönüştürün <details>ve örnekteki gibi HTML5 etiketini kullanın 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>

Tarayıcının Konsolunu kullanarak çok kolay çözüm. Bunu tarayıcı konsolunuza kopyalayın ve enter tuşuna basın:

$("div.input div.prompt_container").on('click', function(e){
    $($(e.target).closest('div.input').find('div.input_area')[0]).toggle();
});

Daha sonra, hücre girişi sayısına tıklayarak hücrenin kodunu değiştirirsiniz.

jupyter nbconvert yourNotebook.ipynb --no-input --no-prompt

jupyter nbconvert yourNotebook.ipynb Kodun bu kısmı, jupyter not defterinin lateks dosya formatını alacak ve bunu bir html'ye çevirecektir.

--no-input Bu, dönüştürme sırasında söylediğimiz ve herhangi bir girdi eklemeyen bir parametre gibidir: burada bir hücreye giriş koddur .. bu yüzden onu gizleriz

--no-prompt Burada ayrıca şunu söylüyoruz: Dönüştürme sırasında, son HTML dosyasındaki hatalar veya uyarılar gibi koddan herhangi bir bilgi istemi göstermeyin), böylece html yalnızca bir rapor biçiminde Metin ve kod çıktısına sahip olacaktır !! ..

Umarım yardımcı olur :)

İşte p3trus tarafından önerilen başka bir çözüm :

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
        {
             'label'   : 'toggle input cells',
             'icon'    : 'icon-refresh', 
             'callback': function(){$('.input').slideToggle()}
        }
    ]);
});

P3trus tarafından açıklandığı gibi : "[It], giriş kodu hücresini gizlemek / göstermek için ipython notebook araç çubuğuna bir düğme ekler. Bunu kullanmak için, custom.js dosyasını .ipython_<profile name>/static/custom/klasörünüze koymanız gerekir , burada kullanılan ipython profilidir. "

Kendi yorumlarım: Bu çözümü doğruladım ve iPython 3.1.0 ile çalışıyor.

Kabul edilen çözüm Julia Jupyter / IJulia'da aşağıdaki değişikliklerle de çalışır:

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

özellikle not:

• kullanmak displayişlevi
• $işaretten kaçış (aksi takdirde değişken olarak görülür)

İşte sunum için Jpuyter (yeni IPython) not defterlerinin nasıl cilalanacağına dair güzel bir makale (aynı @Ken yayınladı). Jupyter'i JS, HTML ve CSS kullanarak genişletmenin, javascript'ten not defterinin python çekirdeği ile iletişim kurma yeteneği dahil olmak üzere sayısız yolu vardır. Büyülü dekoratörler var %%HTMLve %%javascriptbu yüzden bir hücrede kendi başına böyle bir şey yapabilirsiniz:

%%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'in yöntemlerinin jupyter 4.XX'te işe yaradığını da garanti edebilirim.

(Kağıt) HTML Olarak Yazdırma veya Kaydetme

Kağıda yazdırmak isteyenler için, yukarıdaki cevaplar tek başına iyi bir sonuç vermiyor gibi görünüyor. Bununla birlikte, @Max Masnick'in kodunu alıp aşağıdakileri eklemek, birinin tam bir A4 sayfasına yazdırmasına izin verir.

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

Girintinin nedeni, Max Masnick tarafından kaldırılan bilgi istemi bölümünün çıktıda her şeyin sola kayması anlamına gelmesidir. Ancak bu, sınırlı olan çıktının maksimum genişliği için hiçbir şey yapmadı max-width:100%-14ex;. Bu, output_subarea'nın maksimum genişliğini olarak değiştirir max-width:100%;.

Yukarıdaki tüm çözümlerle, kodu saklasanız bile, [<matplotlib.lines.Line2D at 0x128514278>]muhtemelen istemediğiniz figürünüzün üzerine çıkacaksınız .

Girdiyi gizlemek yerine gerçekten kurtulmak istiyorsanız, bence en temiz çözüm rakamlarınızı diske gizli hücrelerde kaydetmek ve ardından sadece Markdown hücrelerinde görüntüleri dahil etmek ![Caption](figure1.png).

jupyter nbconvert testing.ipynb --to html --no-input

Kod hücreleri olmadan bir not defterini HTML'ye dışa aktarmak için basit programlı çözüm (yalnızca çıktı): my_notebook.ipynbdışa aktarmak istediğiniz not defterinin kod hücresine bu kodu ekleyin :

import codecs
import nbformat
import time
from IPython.display import Javascript
from nbconvert import HTMLExporter

def save_notebook():
    display(
        Javascript("IPython.notebook.save_notebook()"),
        include=['application/javascript']
    )    

def html_export_output_only(read_file, output_file):
    exporter = HTMLExporter()
    exporter.exclude_input = True
    output_notebook = nbformat.read(read_file, as_version=nbformat.NO_CONVERT)
    output, resources = exporter.from_notebook_node(output_notebook)
    codecs.open(output_file, 'w', encoding='utf-8').write(output)


# save notebook to html
save_notebook()
time.sleep(1)
output_file = 'my_notebook_export.html'
html_export_output_only("my_notebook.ipynb", output_file)