How to change the background color of a single cell in a jupyter notebook / jupyterlab?

Question

I design a notebook so that variables that could be changed by the user are grouped into distinct cells throughout the notebook. I would like to highlight those cells with a

Answer 1

If you only need to change the color of cells converted with nbconvert, create a template mytemplate.tpl in your folder and add:

{% 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 %}

(adapted from the official docs)

.. then add a tag "highlight" to your cell. In Jupyter lab, you can do this on the left for the selected cell:

Now, convert the notebook with nbconvert using the template:

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

The resulting HTML will look like this:

I found this suitable to highlight specific cells to readers.

Answer 2

Here you go (assuming that you use Python kernel):

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

Then use it like this:

set_background('honeydew')

The solution is a bit hacky, and I would be happy to see a more elegant one. Demo:

Tested in Firefox 60 and Chrome 67 using JupyterLab 0.32.1.

Edit to have it as cell magic, you could simply do:

from IPython.core.magic import register_cell_magic

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

and use it like:

%%background honeydew
my_important_param = 42

Answer 3

Small addition to krassowski's code (tried to add it as comment but couldn't get the formatting to work).

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

This way you can use it both as magic and with normal function call:

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

or

%%bgc yellow
bla = 'bla'*3