如何在Jupyter Notebook中根据变量永久修改选中单元格CSS

需求是根据某个变量的True/False状态，动态改变当前选中的Jupyter Notebook代码单元格背景色，静态修改.jupyter/custom.css没法实现这种动态控制。

之前尝试的两种方案都存在问题：

• 方案1：通过display(HTML)插入静态style标签

display(HTML("<style>.cell.code_cell.rendered.selected { background:red }</style>"))

仅在执行该代码的单元格处于选中状态时才会生效，后续切换选中其他单元格时，新选中的单元格不会应用这个样式。

• 方案2：用JavaScript直接修改当前选中元素的样式

display(HTML("""<script>$('.cell.code_cell.rendered.selected').css({'background-color' : 'green'});<script>"""))

只会一次性修改执行代码时的选中单元格背景，后续切换选中其他单元格无响应，且修改是永久的，无法随变量状态切换复原。

可行解决方案 #

通过结合Python变量控制与JavaScript事件监听，实现实时响应选中状态变化和变量切换的效果：

1. 首先注入监听单元格选中状态的JS代码，同时绑定Python变量到前端状态：

from IPython.display import HTML, display

# 控制高亮的核心变量，True开启，False关闭
highlight_active = True

display(HTML(f"""
<script>
// 同步Python端的高亮状态
let highlightEnabled = {str(highlight_active).lower()};

// 更新选中单元格背景的核心函数
function updateSelectedCellBg() {{
    // 重置所有单元格的自定义背景，避免残留
    $('.cell.code_cell.rendered').css('background-color', '');
    // 开启高亮时，给当前选中单元格设置背景色
    if (highlightEnabled) {{
        $('.cell.code_cell.rendered.selected').css('background-color', '#ffcccc'); // 可自行替换成需要的颜色
    }}
}}

// 监听每个代码单元格的class变化（选中时会添加selected类）
$('.cell.code_cell.rendered').each(function() {{
    const observer = new MutationObserver(mutations => {{
        mutations.forEach(mutation => {{
            if (mutation.attributeName === 'class') {{
                updateSelectedCellBg();
            }}
        }});
    }});
    observer.observe(this, {{ attributes: true }});
}});

// 初始化时执行一次，确保当前选中单元格样式正确
updateSelectedCellBg();

// 暴露全局函数，供Python端调用切换状态
window.setHighlightState = function(state) {{
    highlightEnabled = state;
    updateSelectedCellBg();
}};
</script>
"""))

2. 当需要切换变量状态时，直接调用前端的全局函数即可：

# 关闭高亮
highlight_active = False
display(HTML("<script>setHighlightState(false);</script>"))

# 重新开启高亮
highlight_active = True
display(HTML("<script>setHighlightState(true);</script>"))

方案优势 #

• 实时响应单元格选中状态变化，每次切换选中单元格都会自动更新背景色
• 通过Python变量完全控制高亮状态，切换即时生效
• 关闭高亮时会重置所有单元格背景，不会留下永久修改的痕迹

内容的提问来源于stack exchange，提问作者Bananach