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

Posted

技术标签:

【中文标题】如何更改 jupyter notebook / jupyterlab 中单个单元格的背景颜色?【英文标题】:How to change the background color of a single cell in a jupyter notebook / jupyterlab? 【发布时间】:2018-08-31 22:41:31 【问题描述】:

我设计了一个笔记本,以便将用户可以更改的变量分组到整个笔记本中的不同单元格中。我想用不同的背景颜色突出显示这些单元格,以便用户可以清楚地看到旋钮所在的位置。

我怎样才能做到这一点?

NB:This related question 是关于 static 代码突出显示(用于手册),并且接受的答案建议基本上将所有内容都放在标记 cmets 中。就我而言,我希望突出显示的代码位于可运行单元格中。

【问题讨论】:

使用widgets设置这些变量怎么样,让用户完全不用接触代码? 不错的主意,但我会说这不等同。我的理解是小部件更多地存在于交互空间中,而在这里我想更改配置变量。如果一个变量对应于一个长计算的参数,我希望这个参数在计算过程中不要改变,并让用户清楚。我个人会坚持使用小部件来获得即时的交互式反馈(通常通过%interac)。 您可以在计算开始时禁用用于设置配置变量的小部件。这样,您将阻止用户更改变量,并表明这些值当前正在计算中使用并且无法更改。 当然需要考虑。谢谢! 【参考方案1】:

这就是 jupyter-notebook (v6.3.0) 和 jupyter-nbconvert --to=html (v6.0.7) 中对我有用的方法。

这与@krassowski 和@Gabe 的回答在两个方面有所不同:

    交互式笔记本使用类名.cell.input_area,但nbconvert HTML 使用.jp-CodeCell.jp-Editor.highlight。此代码处理所有这些。

    我更喜欢“线条魔法”而不是“细胞魔法”,因为线条魔法不会改变细胞其余部分的评估。

from IPython.core.magic import register_line_magic
from IPython.display import HTML, display
import json

@register_line_magic
def bg(color, cell=None):    
    script = (
        "var n = [this.closest('.cell,.jp-CodeCell')];"
        "n = n.concat([].slice.call(n[0].querySelectorAll('.input_area,.highlight,.jp-Editor')));"
        f"n.forEach(e=>e.style.background='color');"
        "this.parentNode.removeChild(this)"
    )
    display(HTML(f'<img src onerror="script" style="display:none">'))  

%bg yellow

【讨论】:

【参考方案2】:

给你(假设你使用 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')

解决方案有点老套,我很乐意看到更优雅的解决方案。 演示:

使用 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)
    return eval(cell)

并像这样使用它:

%%background honeydew
my_important_param = 42

【讨论】:

附言。使用set_background('') 禁用着色。 非常好!您是否也可以从中创建一个细胞魔法并将其添加到您的解决方案中? 这似乎不再适用于较新的版本(使用 jupyter notebook 服务器测试:6.0.0,Chrome:76.0.3809.132) 对于 Jupyter notebook 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('&lt;img src onerror=""&gt;'.format(script))) 这个功能很好用!魔法几乎起作用了——它为单元格着色,但抑制了该单元格中的任何 print() 输出。有没有办法让 print() 语句(或任何其他单元格输出)被看到?【参考方案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 将如下所示:

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

【讨论】:

【参考方案4】:

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

【讨论】:

魔法似乎抑制了单元格中的 print() 和其他输出(就像在 krassowski 的回答中所做的那样)。但是,该功能工作正常。你知道在使用魔法调用时如何允许这些输出吗?

以上是关于如何更改 jupyter notebook / jupyterlab 中单个单元格的背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章

随笔-- Jupyter Notebook如何切换主题更改字体大小

随笔-- Jupyter Notebook如何切换主题更改字体大小

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

如何修改jupyter notebook的默认工作路径

jupyter notebook怎么更改目录

jupyter notebook怎么配置