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

147

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

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

lucacerone
источник
10
В пользовательском интерфейсе по умолчанию все еще не существует кнопки для этого (февраль 2016 г.). ИМХО это действительно очень раздражает. Это список функций, которые будут реализованы: github.com/jupyter/notebook/issues/534 Это здорово. Я с нетерпением жду этого.
стохастик
1
Пожалуйста, посмотрите ниже на ответ Ноя. С включением TemplateExporter эта проблема решается независимо от формата вывода. Во время написания ответа Noahs заменяет грубый ответ (который был хорошим решением для TemplateExporter).
Микаэл

Ответы:

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>''')
harshil
источник
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>.
Ахмед
Спасибо за ваш ответ! См. Мой ответ, если вам нужно, чтобы кнопка была скрыта, и возможность скрыть или показать определенные блоки кода, такие как Rstudio.
jaycode
3
Спасибо, это работает и с сохранением в HTML тоже. Рекомендую поместить это в собственную ячейку в верхней части ноутбука.
Вивек Гани
если вы добавите атрибут accesskey = "h" к элементу ввода, вы можете затем выполнить show hide с помощью alt-h (по крайней мере, в chrome)
frankc
7
Как бы вы изменили это, чтобы он даже не показывал кнопку, он просто скрывал код?
Harlekuin
79

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

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

исключит ячейки «входного кода», то есть сам код. Подобные вариантыСуществуют для исключения запросов, ячеек уценки или выходов, а также входов и выходов.

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

Ной
источник
3
это лучший ответ
skurp
Где экспорт .pdf сохраняет по умолчанию?
MyopicVisage
В той же папке, что и блокнот .ipython. Используйте аргумент '--output NotebookNoCode', чтобы переименовать файл.
MyopicVisage
Это должно работать в ноутбуке?
lcrmorin
@were_cat no, это команда оболочки, используемая для экспорта файла записной книжки .ipynb; в этом примере он преобразуется в pdf
Ноа,
19

Я бы использовал 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 теперь есть кнопка для переключения ячеек кода независимо от рабочей книги.

user394430
источник
6
Только что попробовал - кажется, это помогает скрыть ячейки кода при редактировании записной книжки, хотя при сохранении записной книжки в html (т.е. рендеринг в nbviewer) ячейки кода по-прежнему появляются.
Вивек Гани
@VivekGani, просто быстрое замечание, что вы можете скрыть скрытые ячейки в экспортированном html, используя шаблон, предоставленный с тем же репо, см. Соответствующую страницу документа (также, см. Этот соответствующий вопрос )
glS
15

Новейшая версия ноутбука 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>")
});
Яншун Тай
источник
именно то, что я ищу!
lucky1928
Странно, но это решение не сработало, так как меню iPython view остается неизменным. (iPython 3.1.0) Ваше решение вдохновило меня посмотреть дальше и найти очень похожее решение от p3trus, которое добавило кнопку вместо меню, и это сработало.
Ахмед
1
@akhmed Может быть, вы можете обратиться к 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)

Вы можете увидеть пример того, как это выглядит в NBviewer здесь .

Обновление: это будет иметь забавное поведение с ячейками Markdown в Jupyter, но оно отлично работает в HTML-версии ноутбука.

Макс Масник
источник
3
Это работает для ячеек кода, но если у вас есть ячейки уценки, это делает что-то странное. Он показывает уценку как уценку , а затем показывает тот же контент - но отформатированный - ниже.
Скотт Х
Я только что понял, что единственное, что не так - это спецификация узла. Вместо '.input_area'и '.prompt'используйте, 'div.input'и это работает как шарм! Итак, подведем итог, заменить jQuery("div.input").toggle();на место jQuery('.input_area').toggle(); jQuery('.prompt').toggle();. @ Макс Масник, не могли бы вы исправить свой ответ?
Скотт Х
Использование «div.input» в качестве выбора узла работает до тех пор, пока вы не взаимодействуете с ячейками уценки, но я просто понял, что, если вы взаимодействуете с ячейками уценки, вы можете получить какое-то странное поведение. Например, если дважды щелкнуть ячейку уценки, она полностью скрывается. Таким образом, моя настройка Макса хороша для создания HTML-кода, которым можно поделиться с другими, но не для того, чтобы впоследствии слишком много с ним взаимодействовать.
Скотт Х
Да, так что я заметил то же самое, что вы сделали с ячейками Markdown, которые все испортили. Он отлично работает в экспорте HTML, где я его и использую. Я отредактирую ответ, чтобы отметить это.
Макс Масник
1
Чтобы удалить остаток от правого пробела после удаления «.prompt», просто добавьте этот код в конец приведенного выше кода. CSS = """#notebook div.output_subarea { max-width:100%;""" HTML('<style>{}</style>'.format(CSS)), Это очень полезно для печати.
Маленькие столики Бобби
10

Это можно сделать, используя 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 Notebook, по умолчанию в состоянии «скрыть»:

Скрыть кодовое состояние

Когда вы установите состояние «show», вы сможете увидеть код для Jupyter Notebook:

Показать состояние кода

Кроме того, хотя большая часть этого кода должна быть размещена в начале Блокнота, расположение кнопки переключения не является обязательным. Лично я предпочитаю держать это в нижней части документа. Для этого просто переместите display(button)строку в отдельную ячейку кода внизу страницы:

Перемещенная кнопка переключения

Эрик Шепард
источник
9

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

Это в основном то же решение, что и принятый ответ от 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: [##]текст и снижает рентабельность на левой стороне .

кругозор
источник
Можно ли будет использовать этот код, чтобы выборочно скрыть результаты одним нажатием кнопки? 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"
jaycode
источник
Я предполагаю, что это не работает для самых последних версий / Python 3?
Baxx
Работает с версией jupyter 4.3.0 с версией Python 3.6.1.
Алма Рахат
Спасибо! Рад сообщить, что это работает и с ноутбуком Jupyter 5.3.1 . Я использую Python версии 3.6.1
Amitrajit Bose
4

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

from IPython.display import HTML

HTML('''<script> $('div .input').hide()''')
Чейз Райт
источник
1
@Rocketq используй это - from IPython.display import HTML HTML('''<script> $('div.input').show()''')
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, чтобы скрыть / показать ячейку входного кода. Чтобы использовать ее, вы должны поместить файл custom.js в свою .ipython_<profile name>/static/custom/папку, где используется профиль ipython. "

Мои собственные комментарии: я проверил это решение, и оно работает с iPython 3.1.0.

Ахмед
источник
1

Принятое решение также работает в Юлии Юпитер / 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функцию
  • экранировать $знак (иначе рассматривается как переменная)
gozzilli
источник
Я запутался, как заставить это работать. Требуется ли оператор импорта и какой тип блока должен быть в блоке. Необработанный или кодовый блок?
Спен
1

Вот хорошая статья (написанная @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

ThisGuyCantEven
источник
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>] дерьмо над своей фигурой, которое вы, вероятно, не хотите.

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

maxymoo
источник
3
Вы можете положить, _ = plt.plot()чтобы это не печатать [<>]дерьмо
jonnybazookatone
3
Установка точки с запятой после команд построения графиков matplotlib подавила нежелательный для меня вывод.
DakotaD
0
jupyter nbconvert testing.ipynb --to html --no-input
gocode
источник
0
jupyter nbconvert yourNotebook.ipynb --no-input --no-prompt
Навин Кумар
источник
6
Пожалуйста, добавьте некоторое объяснение вместо того, чтобы просто раздражать командой.
Фабиан Беттаг