Как скрыть код из ячеек в ноутбуке ipython, визуализированном с помощью nbviewer?

У меня есть ноутбук ipython/jupyter, который я визуализирую с помощью NBviewer.

Как я могу скрыть весь код из ноутбука, отображаемого NBviewer, так что отображаются только выходные данные кода (например, графики и таблицы) и ячейки уценки?

Ответ 1

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

Ответ 2

Я использовал бы hide_input_all из nbextensions (https://github.com/ipython-contrib/IPython-notebook-extensions). Вот как:

Узнайте, где находится ваш каталог IPython:

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

Загрузите nbextensions и переместите его в каталог IPython.
Отредактируйте файл custom.js где-нибудь в каталоге IPython (мой был в profile_default/static/custom), чтобы быть похожим на custom.example.js в каталоге nbextensions.

Добавьте эту строку в custom.js:

IPython.load_extensions('usability/hide_input_all')

IPython Notebook теперь будет иметь кнопку для переключения кодовых ячеек, независимо от книги.

Ответ 3

Самая новая версия ноутбука IPython больше не позволяет выполнять javascript в ячейках markdown, поэтому добавление новой ячейки markdown со следующим кодом 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>")
});

Ответ 4

Я написал код, который выполняет это, и добавляет кнопку для переключения видимости кода.

В ячейке кода в верхней части ноутбука идет следующее:

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, но оно отлично работает в экспортной версии ноутбука.

Ответ 5

Для лучшего отображения с печатным документом или отчетом нам нужно также удалить кнопку, а также показать или скрыть определенные блоки кода. Вот что я использую (просто скопируйте это в свою первую ячейку):

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

Ответ 6

Существует хорошее решение, предоставляемое здесь, что хорошо работает для ноутбуков, экспортируемых в HTML. Веб-сайт даже ссылается сюда на этот пост SO, но я не вижу решения Криса здесь! (Крис, где ты?)

Это в основном то же самое решение, что и принятый ответ от harshil, но он имеет то преимущество, что скрывает сам код переключения в экспортированном HTML. Мне также нравится, что этот подход позволяет избежать необходимости в HTML-функции IPython.

Чтобы реализовать это решение, добавьте следующий код в ячейку "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: [##] и уменьшает поля слева.

Ответ 7

Теперь это возможно прямо из nbconvert с версии 5.2.1: контент можно отфильтровать, используя опции исключения экспортера встроенного шаблона. Например:

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

будет исключать ячейки "входного кода", то есть сам код. Аналогичные варианты существуют для исключения подсказок, ячеек памяти или выходов или обоих входов и выходов.

(Эти параметры должны работать независимо от формата вывода.)

Ответ 8

Это сделает вывод ноутбука IPython. Тем не менее, вы заметите, что сможете просматривать код ввода. Вы можете скопировать ноутбук, а затем добавить этот код, если необходимо, чтобы поделиться с кем-то, кому не нужно просматривать код.

from IPython.display import HTML

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

Ответ 9

Используйте Runtools, который расширяет базовый ноутбук iPython:

https://github.com/ipython-contrib/IPython-notebook-extensions/wiki/Runtools

Ответ 10

Вот еще одно решение, предложенное 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.

Ответ 11

Принятое решение также работает в 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
выйти из знака $ (иначе рассматривается как переменная)

Ответ 12

Это можно сделать с помощью виджета 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) в отдельную ячейку кода в нижней части страницы:

Ответ 13

(Бумага) Печать или сохранение в формате 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%;.

Ответ 14

При всех вышеперечисленных решениях, даже если вы скрываете код, вы все равно получите [<matplotlib.lines.Line2D at 0x128514278>] дерьмо над своей фигурой, которую вы, вероятно, не хотите.

Если вы действительно хотите избавиться от ввода, а не просто скрывать его, я думаю самым чистым решением является сохранение ваших фигур на диск в скрытых ячейках, а затем просто включение изображений в ячейки Markdown с использованием, например, ![Caption](figure1.png).

Ответ 15

Вот хорошая статья (тот же самый @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

Ответ 16

Преобразуйте ячейку в Markdown и используйте <details> 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!")