如何在Jupyter Notebook/JupyterLab中为可运行单元格设置背景色？

Great question! Grouping editable variables into visually distinct code cells is a fantastic way to make your notebook user-friendly—users can immediately spot where they need to tweak parameters without digging through lines of code. Below are step-by-step methods for both Jupyter Notebook (the classic interface) and JupyterLab, all focused on keeping the cells functional, runnable code cells (no static markdown tricks here):

Method: Custom CSS Classes + Cell Properties #

This approach lets you define reusable styles and apply them to specific code cells:

1. First, inject your custom style
   Create a new code cell at the top of your notebook, paste this code, and run it:

   from IPython.display import HTML, display
   
   def load_custom_styles():
       # Define multiple styles if you need different colors for different variable groups
       display(HTML("""
           <style>
               /* Style for primary editable cells */
               .editable-primary {
                   background-color: #e8f4f8 !important;
                   border-left: 4px solid #2196f3 !important;
               }
               /* Style for secondary editable cells (different color group) */
               .editable-secondary {
                   background-color: #f9f3e8 !important;
                   border-left: 4px solid #ff9800 !important;
               }
           </style>
       """))
   
   load_custom_styles()
   

   This adds two distinct highlight styles you can use for different variable groups.

2. Apply the style to target code cells

   • For each code cell holding editable variables:
     1. Press Esc to enter command mode (cell border turns blue)
     2. Press F4 to open the Cell Properties panel (or right-click the cell → Cell Properties)
     3. In the "Cell Class" field, type either editable-primary or editable-secondary (match the style you want)
     4. Click "OK" and press Enter to go back to edit mode
        The cell will now show your custom background color, and it remains a fully functional, runnable code cell.

JupyterLab uses a different UI structure, so we’ll leverage its built-in tagging system plus custom CSS:

Method: Custom CSS + Cell Tags #

1. Add your custom style to JupyterLab

   • Open the settings menu (gear icon in the top right) → Advanced Settings Editor
   • Select Custom CSS from the left sidebar
   • Paste this code into the editor (adjust colors as needed):

     /* Style for primary editable cells */
     .jp-Cell[data-tag~="editable-primary"] .jp-Cell-inputWrapper {
         background-color: #e8f4f8;
         border-left: 4px solid #2196f3;
     }
     /* Style for secondary editable cells */
     .jp-Cell[data-tag~="editable-secondary"] .jp-Cell-inputWrapper {
         background-color: #f9f3e8;
         border-left: 4px solid #ff9800;
     }
     

   • Click "Save Settings" (top right) — JupyterLab will apply the styles immediately.

2. Tag your editable code cells

   • For each target code cell:
     1. Right-click the cell → Add Tag
     2. Type editable-primary or editable-secondary (matching your CSS classes) and press Enter
        The cell will instantly get your custom background, and it’s still a fully runnable code cell.

Bonus Tips #

• Feel free to tweak the background-color and border-left values to match your notebook’s theme or to create more distinct groups.
• In Jupyter Notebook, if you can’t find the Cell Properties panel, make sure you’re in command mode (Esc) before pressing F4 — it won’t show up in edit mode.
• Both methods preserve all code cell functionality: users can edit the variables, run the cell, and see outputs just like any other code cell.

内容的提问来源于stack exchange，提问作者P-Gn