Changing the background color of Markdown cells

JupyterLab extensions
, ,
1

Hi there,

I am developing a Jupyterlab extension and I want to highlight some of the cells by changing their background colors. My current way (attached below) works for code cells but does not work for Markdown cells. To be more specific, the background color of Markdown cells only changes after I double clicks on it to make it editable. I’m wondering whether there’s a way to highlight a Markdown cell without clicking on it?

My current way of highlighting code cells:

const highlightCell = (cellIndex: number) => {
      if (props.notebookTracker === null || props.notebookTracker.currentWidget === null) {
          console.log('[highlightCell] no notebookTracker or no notebookPanel.');
          return;
      }
     // get cell by cellIndex
      const cellList = props.notebookTracker.currentWidget.content.widgets;
      const cell = cellList[cellIndex];
      if (cell && cell.editor instanceof CodeMirrorEditor) {
          const editor = cell.editor.editor;
          const styleClass = "jp-InputArea-editor-dependencyline"; // background-color is defined in this class
          editor.addLineClass(0, "background", styleClass); // highlight the first line of that code cell
          console.log(`[highlightCell] highlighted the 1st line of the cell ${cellIndex}.`);
      }
      else {
          console.log('[highlightCell] the editor of activeCell is not a CodeMirrorEditor');
      }
  }

This works well for code cells:

code_cell
code_cell872×101 10.5 KB

but for Markdown cells, it requires double click to get the new background color showing.
doubleclick

Any help would be appreciated! Thank you in advance!

3

I created an extension some time ago that colours cells using celltags, provides notebook toolbar buttons for toggling coloured backgrounds, and a settings panel for setting colours.

A simpler “ground-up” approach would be to use GitHub - parmentelat/jupyterlab-celltagsclasses and then specify some custom.css in the .jupyter custom path.

3 Likes