Как изменить цвет фона одной ячейки в блокноте jupyter / jupyterlab?

Я проектирую записную книжку таким образом, чтобы переменные, которые мог изменять пользователь, были сгруппированы в отдельные ячейки по всей записной книжке. Я хотел бы выделить эти ячейки другим цветом фона, чтобы пользователю было очевидно, где находятся ручки.

Как я мог этого добиться?

NB: Этот связанный вопрос касался статики выделение кода (для руководства) и принятый ответ предлагали в основном помещать все в комментарии разметки. В моем случае я хочу, чтобы выделенный код находился в работающей ячейке.


person P-Gn    schedule 22.03.2018    source источник
comment
Как насчет использования виджетов для установки этих переменных, чтобы пользователям вообще не нужно трогать код?   -  person SergiyKolesnikov    schedule 22.03.2018
comment
Неплохая идея, но я бы сказал, что это не эквивалент. Насколько я понимаю, виджеты больше живут в пространстве взаимодействия, тогда как здесь я хочу изменить переменные конфигурации. Если одна переменная соответствует параметру для длительного вычисления, я бы хотел, чтобы этот параметр не изменялся во время вычисления, и чтобы это было понятно пользователю. Я бы лично придерживался виджетов для немедленной интерактивной обратной связи (обычно через %interac).   -  person P-Gn    schedule 22.03.2018
comment
Вы можете отключить виджеты, используемые для установки переменных конфигурации в начале вычислений. Таким образом вы предотвратите изменение переменных пользователем и сигнализируете, что значения в настоящее время используются в вычислениях и не могут быть изменены.   -  person SergiyKolesnikov    schedule 23.03.2018
comment
Конечно, есть над чем подумать. Спасибо!   -  person P-Gn    schedule 23.03.2018


Ответы (3)


Вот и все (при условии, что вы используете ядро ​​Python):

from IPython.display import HTML, display

def set_background(color):    
    script = (
        "var cell = this.closest('.jp-CodeCell');"
        "var editor = cell.querySelector('.jp-Editor');"
        "editor.style.background='{}';"
        "this.parentNode.removeChild(this)"
    ).format(color)
    
    display(HTML('<img src onerror="{}" style="display:none">'.format(script)))

Тогда используйте это так:

set_background('honeydew')

Решение немного хакерское, и я был бы рад увидеть более элегантное. Демо:

введите описание изображения здесь

Протестировано в Firefox 60 и Chrome 67 с использованием JupyterLab 0.32.1.

Отредактируйте, чтобы сделать его магией ячейки, вы можете просто сделать:

from IPython.core.magic import register_cell_magic

@register_cell_magic
def background(color, cell):
    set_background(color)
    return eval(cell)

и используйте его как:

%%background honeydew
my_important_param = 42
person krassowski    schedule 12.06.2018
comment
PS. Используйте set_background(''), чтобы отключить окраску. - person krassowski; 12.06.2018
comment
Очень хорошо! Не могли бы вы также создать из него клеточную магию и добавить ее в свое решение? - person P-Gn; 13.06.2018
comment
Добавлен. Сначала я скептически относился к идее использования фонов (виджеты были моей первоначальной мыслью), но через некоторое время я думаю, что у этого есть большой потенциал для презентаций и так далее. И, поскольку он использует CSS, можно также встраивать градиенты и изображения в фон! - person krassowski; 13.06.2018
comment
Похоже, что это больше не работает в более новых версиях (протестировано на сервере ноутбука jupyter: 6.0.0, Chrome: 76.0.3809.132) - person martin-martin; 17.09.2019
comment
@ martin-martin вы используете JupyterLab (интерфейс нового поколения для ноутбуков Jupyter) или старый блокнот Jupyter? (Он все еще работает в JupyterLab 1.1.3) - person krassowski; 17.09.2019
comment
Я использую Jupyter Notebooks. Не пробовал на Jupyter Labs. - person martin-martin; 18.09.2019
comment
Это работает в jupyter lab 1.1.4 в браузерах, но есть ли у кого-нибудь изменение цвета, чтобы пережить nbconvert или использовать nbviewer? Я могу заставить работать различные другие свойства html (изменение цвета текста, изменение фона окна, но НЕ цвет работающей ячейки. (Дайте мне знать, должен ли это быть другой вопрос) - person Firas; 05.10.2019
comment
Это работает только для ячейки кода, поскольку %%background не работает для ячейки уценки. - person yoonghm; 10.11.2019
comment
Для ноутбука Jupyter v6 + используйте это: def set_background(color): script = ( "var cell = this.closest('.code_cell');" "var editor = cell.querySelector('.input_area');" "editor.style.background='{}';" "this.parentNode.removeChild(this)" ).format(color) display(HTML('<img src onerror="{}">'.format(script))) - person psychemedia; 05.12.2019
comment
Функция отлично работает! Магия почти работает - она ​​окрашивает ячейку, но подавляет любой вывод print () в этой ячейке. Есть ли способ получить волшебство, позволяющее видеть оператор print () (или любой другой вывод ячейки)? - person MJoseph; 02.04.2020
comment
@MJoseph, да, просто добавьте eval (ячейку). Я изменил ответ, чтобы включить его. - person krassowski; 03.11.2020
comment
@krassowski спасибо! Теперь в ячейке работает простое присвоение переменных и арифметика. К сожалению, если вы используете какие-либо импортированные библиотеки в своей ячейке, eval не распознает их. Например, os.curdir не может быть запущен при использовании этой магии, если os был импортирован в предыдущую ячейку. - person MJoseph; 20.11.2020
comment
Проверено на google colab 2021-04-16 Не влияет. - person ctrl-alt-delor; 16.04.2021

Небольшое дополнение к коду krassowski (попытался добавить его как комментарий, но не получил форматирование для работы).

from IPython.core.magic import register_cell_magic
from IPython.display import HTML, display

@register_cell_magic
def bgc(color, cell=None):
    script = (
        "var cell = this.closest('.jp-CodeCell');"
        "var editor = cell.querySelector('.jp-Editor');"
        "editor.style.background='{}';"
        "this.parentNode.removeChild(this)"
    ).format(color)

    display(HTML('<img src onerror="{}">'.format(script)))

Таким образом, вы можете использовать его как по волшебству, так и с обычным вызовом функции:

bgc('yellow')
bla = 'bla'*3

or

%%bgc yellow
bla = 'bla'*3
person Gabe    schedule 12.12.2018
comment
Похоже, что магия подавляет print () и другой вывод в ячейке (как в ответе Крассовского). Однако функция работает нормально. Вы знаете, как разрешить эти выходы при вызове с помощью магии? - person MJoseph; 07.04.2020

Если вам нужно только изменить цвет ячеек, преобразованных с помощью nbconvert, создайте шаблон mytemplate.tpl в своей папке и добавьте:

{% extends 'full.tpl'%}
{% block any_cell %}
{% if 'highlight' in cell['metadata'].get('tags', []) %}
    <div style="background:lightpink">
        {{ super() }}
    </div>
{% else %}
    {{ super() }}
{% endif %}
{% endblock any_cell %}

(адаптировано из официальных документов)

.. затем добавьте в ячейку метку «выделить». В лаборатории Jupyter вы можете сделать это слева для выбранной ячейки:  введите описание изображения здесь

Теперь преобразуйте записную книжку с помощью nbconvert, используя шаблон:

jupyter nbconvert --to html 'mynb.ipynb' --template=mytemplate.tpl

В результате HTML будет выглядеть так:

введите здесь описание изображения

Я нашел это подходящим для выделения читателям определенных ячеек.

person Alex    schedule 03.04.2020