IPython नोटबुक में कोशिकाओं से कोड को छुपाने के लिए nbviewer की कल्पना कैसे की जाती है?


147

मेरे पास एक ipython / jupyter नोटबुक है जिसे मैं NBviewer का उपयोग करके कल्पना करता हूं।

मैं NBviewer द्वारा प्रदान की गई नोटबुक से सभी कोड को कैसे छिपा सकता हूं, ताकि कोड का केवल आउटपुट (जैसे प्लॉट और टेबल) और मार्कडाउन सेल दिखाए जाएं?


10
डिफ़ॉल्ट UI (फरवरी 2016) में अभी भी इसके लिए कोई मौजूदा बटन नहीं है। IMHO यह वास्तव में बहुत कष्टप्रद है। यह उन सुविधाओं की सूची पर है जिन्हें लागू किया जाएगा: github.com/jupyter/notebook/issues/534 यह बहुत अच्छा है। मुझे इसकी आशा है।
स्टोकेस्टिक 19

1
कृपया नीचे नूह के उत्तर पर एक नज़र डालें। टेम्प्लेट एक्सपोर्टर के शामिल होने से यह समस्या आउटपुट फॉर्मेट से स्वतंत्र हो जाती है। नूह के उत्तर लिखने के समय कठोर जवाबों का जवाब दिया जाता है (जो कि टेम्पलेट एक्सपोर्टर का अच्छा समाधान था)।
माइकल 23

जवाबों:


235
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
अगर मैं इसे कोड सेल के अंदर रख दूं तो iPython 3.1.0 पर मेरे लिए काम किया गया। मैंने <form action ... > ... </form>साधारण HTML की जगह लीThe raw code for this IPython notebook is by default hidden for easier reading.To toggle on/off the raw code, click <a href="javascript:code_toggle()">here</a>.
akhmed

आपके उत्तर के लिए धन्यवाद! यदि आपको बटन को छिपाने की आवश्यकता है और Rstudio जैसे कुछ कोड ब्लॉक को छिपाने या दिखाने की क्षमता है, तो मेरा उत्तर देखें।
जयाकोड

3
धन्यवाद, यह काम करता है और 'html में बचत' के साथ भी। यह नोटबुक के शीर्ष पर अपने सेल में रखने की सलाह देते हैं।
विवेक गनी

यदि आप इनपुट तत्व में विशेषता एक्सेस = = "h" जोड़ते हैं, तो आप शो को
हाई

7
आप इसे कैसे बदलेंगे इसलिए यह बटन भी नहीं दिखाता है, यह सिर्फ कोड छुपाता है?
हरलेकुइन

79

यह अब nbconvert से सीधे संस्करण 5.2.1 के रूप में संभव है : अंतर्निर्मित टेम्पलेट निर्यातक का उपयोग करके सामग्री को फ़िल्टर किया जा सकता है । उदाहरण के लिए:

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

"इनपुट कोड" सेल को छोड़कर, अर्थात कोड ही होगा। इसी तरह के विकल्प प्रॉम्प्ट, मार्कडाउन सेल या आउटपुट या इनपुट और आउटपुट दोनों को बाहर करने के लिए मौजूद हैं।

(इन विकल्पों को आउटपुट प्रारूप के बावजूद काम करना चाहिए।)


3
यह सबसे अच्छा जवाब है
स्कर्प

डिफ़ॉल्ट रूप से .pdf निर्यात कहाँ सहेजता है?
MyopicVisage

.Ipyon नोटबुक के रूप में समान फ़ोल्डर। फ़ाइल का नाम बदलने के लिए तर्क - --output NotebookNoCode का उपयोग करें।
MyopicVisage

क्या यह नोटबुक में चलना चाहिए?
lcrmorin

@were_cat नहीं, यह .ipynb नोटबुक फ़ाइल निर्यात करने के लिए उपयोग किया जाने वाला शेल कमांड है; इस उदाहरण में, यह पीडीएफ में परिवर्तित हो जाता है
नूह

19

मैं nbextensions ( https://github.com/ipython-contrib/IPython-notebook-nension ) hide_input_allसे उपयोग करूंगा । ऐसे:

  1. पता करें कि आपका IPython निर्देशिका कहां है:

    from IPython.utils.path import get_ipython_dir
    print get_ipython_dir()
  2. डाउनलोड करें और इसे IPython निर्देशिका में स्थानांतरित करें।

  3. IPython निर्देशिका में कहीं भी अपने custom.js फ़ाइल को संपादित करें (मेरा प्रोफ़ाइल प्रोफाइल में था / स्थिर / कस्टम ) nbextensions निर्देशिका में custom.example.js के समान होने के लिए ।

  4. इस लाइन को custom.js में जोड़ें :

    IPython.load_extensions('usability/hide_input_all')

IPython Notebook में अब कोड सेल को टॉगल करने के लिए एक बटन होगा, चाहे वर्कबुक कोई भी हो।


6
बस यह कोशिश की - यह एक नोटबुक को संपादित करते समय कोड कोशिकाओं को छिपाने में मदद करने के लिए लगता है, हालांकि जब नोटबुक को html में सहेजना (यानी nbviewer को प्रदान करना) अभी भी कोड सेल दिखाई देते हैं।
विवेक गनी

@VivekGani सिर्फ एक त्वरित नोट है कि आप एक ही रेपो के साथ प्रदान किए गए टेम्पलेट का उपयोग करके निर्यातित HTML में छिपी हुई कोशिकाओं को छिपा कर रख सकते हैं, संबंधित डॉक पेज देखें ( यह प्रासंगिक प्रश्न भी देखें )
glS

15

नवीनतम IPython नोटबुक संस्करण अब मार्कडाउन कोशिकाओं में जावास्क्रिप्ट निष्पादित करने की अनुमति नहीं देता है, इसलिए निम्नलिखित जावास्क्रिप्ट कोड के साथ एक नया मार्कडाउन सेल जोड़ने से आपके कोड कोशिकाओं को छिपाने के लिए अब काम नहीं होगा ( इस लिंक को देखें )

नीचे के रूप में ~ ~ .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>")
});

वास्तव में मैं क्या देख रहा हूँ!
भाग्यशाली 1928

अजीब बात है कि समाधान मेरे लिए काम नहीं किया क्योंकि iPython दृश्य मेनू अपरिवर्तित रहता है। (iPython 3.1.0) आपके समाधान ने मुझे आगे देखने के लिए प्रेरित किया और p3trus द्वारा एक बहुत ही समान समाधान खोजने के लिए जिसने मेनू के बजाय एक बटन जोड़ा और यह काम किया।
Akhmed

1
@ मखमली हो सकता है कि आपका उल्लेख stackoverflow.com/a/29851084/1914781 पर हो । यह एक अंतर सवाल है लेकिन यह आपके लिए मददगार है!

12

मैंने कुछ कोड लिखे जो इसे पूरा करता है, और कोड की दृश्यता को टॉगल करने के लिए एक बटन जोड़ता है।

निम्नलिखित नोटबुक के शीर्ष पर एक कोड सेल में जाता है:

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)

आप यहां एक उदाहरण देख सकते हैं कि यह एनबीवी में कैसा दिखता है

अपडेट: यह जुपिटर में मार्कडाउन कोशिकाओं के साथ कुछ अजीब व्यवहार होगा, लेकिन यह नोटबुक के HTML निर्यात संस्करण में ठीक काम करता है।


3
यह कोड कोशिकाओं पर काम करता है, लेकिन अगर आपके पास मार्कडाउन सेल हैं तो यह कुछ अजीब करता है। यह मार्कडाउन को मार्कडाउन के रूप में दिखाता है , और फिर उसी सामग्री को दिखाता है - लेकिन स्वरूपित - नीचे।
स्कॉट एच।

मुझे लगा कि केवल गलत चीज नोड विनिर्देश है। इसके बजाय '.input_area'और '.prompt', का उपयोग करें 'div.input'और यह एक आकर्षण की तरह काम करता है! तो फिर से बदलने के लिए jQuery("div.input").toggle();, के स्थान पर स्थानापन्न jQuery('.input_area').toggle(); jQuery('.prompt').toggle();। @ मोम मेसनिक, क्या आप अपना उत्तर ठीक कर सकते हैं?
स्कॉट एच।

"Div.input" का उपयोग नोड चयन के रूप में तब तक काम करता है जब तक आप मार्कडाउन कोशिकाओं के साथ बातचीत नहीं करते हैं, लेकिन मुझे अभी पता चला है कि यदि आप मार्कडाउन कोशिकाओं के साथ बातचीत करते हैं तो आपको कुछ फंकी व्यवहार मिल सकता है। उदाहरण के लिए, यदि आप मार्कडाउन सेल पर डबल क्लिक करते हैं तो यह पूरी तरह से छिप जाता है। इसलिए जैसे-जैसे, मैक्स के समाधान के लिए मेरा ट्वीक HTML को दूसरों के साथ साझा करने के लिए ठीक है, बल्कि बाद में इसके साथ बहुत अधिक बातचीत करने के लिए ठीक नहीं है।
स्कॉट एच।

हाँ, तो मैंने वही देखा, जो आपने मार्कडाउन की कोशिकाओं के साथ किया था। यह HTML निर्यात में ठीक काम करता है, जहाँ मैं इसका उपयोग करता हूँ। मैं इसे नोट करने के लिए उत्तर संपादित करूंगा।
मैक्स मैनिक जूल

1
".Prompt" के निष्कासन से सही स्थान के बचे हुए को हटाने के लिए बस इस कोड को उपरोक्त कोड के अंत में जोड़ें। CSS = """#notebook div.output_subarea { max-width:100%;""" HTML('<style>{}</style>'.format(CSS))। यह प्रिंटिंग के लिए बहुत उपयोगी है।
छोटे बॉबी टेबल्स

10

यह एक IPython ToggleButtonविजेट और जावास्क्रिप्ट का एक छोटा सा उपयोग करके किया जा सकता है । निम्नलिखित कोड को दस्तावेज़ के शीर्ष पर एक कोड सेल में रखा जाना चाहिए:

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)

यह जुपिटर नोटबुक के कोड को दिखाने / छिपाने के लिए, "छिपाने" के लिए डिफ़ॉल्ट रूप से निम्नलिखित बटन बनाता है:

कोड स्थिति छुपाएं

जब "शो" स्थिति पर सेट किया जाता है, तो आप जुपिटर नोटबुक के लिए कोड देख सकते हैं:

कोड राज्य दिखाएं

एक तरफ, जबकि इस कोड को नोटबुक की शुरुआत में रखा जाना चाहिए, टॉगल बटन का स्थान वैकल्पिक है। व्यक्तिगत रूप से, मैं इसे दस्तावेज़ के निचले भाग पर रखना पसंद करता हूं। ऐसा करने के लिए, बस display(button)पंक्ति को पृष्ठ के निचले भाग में एक अलग कोड सेल में ले जाएँ:

स्थानांतरित टॉगल बटन


9

यहाँ एक अच्छा समाधान प्रदान किया गया है कि काम करता है अच्छी तरह से करने के लिए नोटबुक एचटीएमएल में निर्यात किया। यहाँ तक कि वेबसाइट भी इस SO पोस्ट पर वापस लिंक करती है, लेकिन मुझे यहाँ क्रिस का समाधान दिखाई नहीं देता है! (क्रिस, तुम कहाँ हो?)

यह मूल रूप से कठोर से स्वीकृत उत्तर के रूप में एक ही समाधान है, लेकिन इसे निर्यात किए गए HTML में टॉगल कोड को छिपाने का लाभ है। मुझे यह भी पसंद है कि यह दृष्टिकोण IPython HTML फ़ंक्शन की आवश्यकता से बचा जाता है।

इस समाधान को लागू करने के लिए, अपनी नोटबुक के शीर्ष पर 'रॉ 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 को नोटबुक निर्यात करें। कोड दिखाने या छिपाने के लिए नोटबुक के शीर्ष पर एक टॉगल बटन होगा।

क्रिस यहाँ एक उदाहरण भी प्रदान करता है

मैं यह सत्यापित कर सकता हूं कि यह जुपिटर 5.0.0 में काम करता है

अद्यतन : div.promptतत्वों के साथ-साथ तत्वों को दिखाना / छिपाना भी सुविधाजनक है div.input। यह पाठ In [##]:और Out: [##]पाठ को हटाता है और बाईं ओर हाशिये को कम करता है।


क्या इस कोड का उपयोग बटन के क्लिक से चुनिंदा आउटपुट को छुपाना संभव होगा? IE $('div.output').next().hide('500');अगले उत्पादन को छिपाने के लिए? मैंने खुद कोशिश की है, लेकिन यह काम नहीं कर सकता।
ब्रायन कीथ

7

मुद्रित दस्तावेज़ या एक रिपोर्ट के साथ बेहतर प्रदर्शन के लिए, हमें बटन को भी हटाने की आवश्यकता है, और कुछ कोड ब्लॉक दिखाने या छिपाने की क्षमता। यहाँ मैं क्या उपयोग कर रहा हूँ (बस अपने पहले सेल में इसे कॉपी-पेस्ट करें):

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

मुझे लगता है कि यह सबसे हाल के संस्करणों / अजगर 3 के लिए काम नहीं करता है?
बैक्सक्स

अजगर संस्करण के साथ काम करता है 4.3.0 पायथन संस्करण 3.6.1 के साथ।
अल्मा राहत

धन्यवाद! यह कहते हुए खुशी है कि यह ज्यूपिटर नोटबुक 5.3.1 के साथ भी काम करता है । मैं Python संस्करण 3.6.1
अमितजीत बोस

4

यह एक IPython नोटबुक आउटपुट प्रदान करेगा। हालाँकि, आप इनपुट कोड देख पाएंगे। आप एक नोटबुक की प्रतिलिपि बना सकते हैं, फिर इस कोड को जोड़ सकते हैं यदि जरूरत हो तो किसी ऐसे व्यक्ति के साथ साझा करें जिसे कोड देखने की आवश्यकता नहीं है।

from IPython.display import HTML

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

1
@Rocketq इस का उपयोग करें - from IPython.display import HTML HTML('''<script> $('div.input').show()''')
13:19 पर fixxxer


1

यहाँ एक और समाधान 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 नोटबुक टूलबार में एक बटन जोड़ता है। इसका उपयोग करने के लिए, आपको अपने .ipython_<profile name>/static/custom/फ़ोल्डर में custom.js फ़ाइल डालनी होगी , जहाँ उपयोग में ipython प्रोफाइल है। "

मेरी अपनी टिप्पणियाँ: मैंने इस समाधान को सत्यापित किया और यह iPython 3.1.0 के साथ काम करता है।


1

स्वीकृत समाधान निम्नलिखित संशोधनों के साथ जूलिया जुपिटर / इज़ुलिया में भी काम करता है:

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फ़ंक्शन का उपयोग करें
  • $संकेत से बच (अन्यथा एक चर के रूप में देखा जाता है)

मैं असमंजस में हूं कि यह काम कैसे हो। क्या एक आयात विवरण की आवश्यकता है और किस प्रकार का बॉक्स ब्लॉक होना चाहिए। एक कच्चा एक या एक कोड बॉक्स?
J Spen

1

यहाँ प्रस्तुत करने के लिए Jpuyter (नया IPython) पुस्तिकाओं को कैसे पॉलिश किया जाए, इस पर एक अच्छा लेख (वही एक @Ken पोस्ट किया गया) है। जेएसपी, एचटीएमएल और सीएसएस का उपयोग करके ज्यूपिटर का विस्तार करने के अनगिनत तरीके हैं, जिसमें जावास्क्रिप्ट से नोटबुक के अजगर कर्नेल के साथ संवाद करने की क्षमता शामिल है। इसके लिए मैजिक डेकोरेटर हैं %%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 में क्रिस के तरीकों पर भी काम कर सकता हूं


1

ब्राउज़र के कंसोल का उपयोग करके बहुत आसान समाधान। आप इसे अपने ब्राउज़र कंसोल और हिट एंटर में कॉपी करें:

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

ब्राउज़र कंसोल में स्क्रिप्ट डालें

फिर आप सेल इनपुट की संख्या पर क्लिक करके सेल के कोड को टॉगल करें।

मोबाइल नम्बर


0

(कागज) मुद्रण या 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-width:100%-14ex;। यह output_subarea की अधिकतम चौड़ाई को बदलता है max-width:100%;


0

ऊपर दिए गए सभी समाधानों के साथ, भले ही आप कोड छिपा रहे हों, फिर भी आपको समाधान मिलेगा [<matplotlib.lines.Line2D at 0x128514278>] अपने आंकड़े के ऊपर बकवास जिसे आप नहीं चाहते हैं।

यदि आप वास्तव में इसे छुपाने के बजाय इनपुट से छुटकारा पाना चाहते हैं, तो मुझे लगता है कि सबसे साफ समाधान छिपी हुई कोशिकाओं में डिस्क को अपने आंकड़े बचाने के लिए है, और फिर उदाहरण के लिए मार्कडाउन कोशिकाओं में छवियों को शामिल करना ![Caption](figure1.png)


3
आप _ = plt.plot()इसे [<>]बकवास नहीं करने के लिए रख सकते हैं
jonnybazookatone

3
माटप्लोटलिब प्लॉटिंग कमांड के बाद एक अर्धविराम लगाकर मेरे लिए अवांछित आउटपुट को दबा दिया।
डकोटाड


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.