如何在jupyter notebook / jupyterlab中更改单个单元格的背景颜色？

Question

我设计了一个笔记本，以便用户可以更改的变量被分组到整个笔记本中的不同单元格中。我想强调那些具有不同背景颜色的单元格，这样对于旋钮所在的用户来说是显而易见的。

我怎么能实现这个目标？

注意：This related question是关于静态代码突出显示（对于手册），并且建议接受的答案基本上将所有内容都放在标记注释中。就我而言，我希望突出显示的代码位于可运行的单元格。

Answer 1

在这里（假设您使用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="{}">'.format(script)))

然后像这样使用它：

set_background('honeydew')

解决方案有点hacky，我很高兴看到更优雅的一个。 演示：

使用JupyterLab 0.32.1在Firefox 60和Chrome 67中测试。

编辑将其作为单元魔术，你可以简单地执行：

from IPython.core.magic import register_cell_magic

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

并使用它：

%%background honeydew
my_important_param = 42

Answer 2

对krassowski's code的少量添加（试图将其添加为注释，但无法使格式生效）。

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

或

%%bgc yellow
bla = 'bla'*3

Answer 3

如果您只需要更改用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 %}

（根据官方docs改编）

..然后向您的单元格添加一个标签“ highlight”。在Jupyter实验室中，您可以在左侧为所选单元格执行此操作：

现在，使用模板使用nbconvert转换笔记本：

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

生成的HTML将如下所示：

我发现这适合向读者突出特定的单元格。