Як приховати код від комірок у ноутбуці ipython, візуалізованому за допомогою nbviewer?

У мене є ноутбук з ipython / jupyter, який я візуалізую за допомогою NBviewer.

Як я можу приховати весь код із зошита, виданого 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>''')

Тепер це можливо безпосередньо з 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 з'явиться кнопка для перемикання комірок коду, незалежно від робочої книги.

Найновіша версія ноутбука IPython більше не дозволяє виконувати javascript у клітинках розмітки, тому додавання нової комірки розмітки із наведеним нижче кодом javascript більше не працюватиме, щоб приховати клітинки коду (див. Це посилання )

Змініть ~ / .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)

Це створює наступну кнопку для перемикання показу / приховування коду для ноутбука Юпітера, дефолтом якого є стан "приховати":

Якщо встановлено стан "показ", ви зможете побачити код для ноутбука Юпітера:

Окрім того, хоча значна частина цього коду має бути розміщена на початку Ноутбука, розташування кнопки перемикання необов’язково. Особисто я вважаю за краще зберігати його внизу документа. Для цього просто перемістіть display(button)рядок до окремої кодової комірки внизу сторінки:

Існує приємне рішення тут , що добре працює для ноутбуків на експорт в HTML. Веб-сайт навіть посилається тут на цю публікацію ТА, але я не бачу тут рішення Кріса! (Крісе, де ти?)

Це в основному те саме рішення, що і прийнята відповідь від 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 і використовуйте <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 : "[Він] додає кнопку на панелі інструментів ноутбука ipython, щоб приховати / показати комірку вхідного коду. Щоб її використовувати, потрібно помістити файл custom.js у свій.ipython_<profile name>/static/custom/ папку, де - використовується профіль ipython. "

Мої власні коментарі: я перевірив це рішення, і воно працює з iPython 3.1.0.

Прийняте рішення також працює в Джулії Юпітер / 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>

Я також можу поручити методи Кріса, які працюють в jupyter 4.XX

Дуже просте рішення за допомогою консолі браузера. Ви копіюєте це в консоль браузера і натискаєте клавішу 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-width:100%-14ex;. Це змінює максимальну ширину вихідної підсумкової зони на 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