13

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

我怎么能做到这一点？

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

4

4 回答 4

18

给你（假设你使用 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
于 2018-06-12T19:55:41.310 回答
1

如果您只需要更改用 转换的单元格的颜色，请在您的文件夹中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 将如下所示：

在此处输入图像描述

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

于 2020-04-03T13:15:23.417 回答
1

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

或者

%%bgc yellow
bla = 'bla'*3
于 2018-12-12T16:02:59.310 回答
0

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

它与@krassowski 和@Gabe 的答案在两个方面不同：

  1. 交互式笔记本使用类名.celland .input_area，但 nbconvert HTML 使用.jp-CodeCelland .jp-Editorand .highlight。这段代码处理所有这些。

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

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
于 2021-08-24T06:44:01.587 回答