# Changing the background color of Markdown cells

**URL:** https://discourse.jupyter.org/t/changing-the-background-color-of-markdown-cells/19775
**Category:** extensions
**Tags:** how-to, help-wanted, jupyterlab
**Created:** [June 9, 2023, 12:59am UTC](https://discourse.jupyter.org/t/changing-the-background-color-of-markdown-cells/19775 "2023-06-09T00:59:26Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![enmengliu](https://avatars.discourse-cdn.com/v4/letter/e/6bbea6/32.png) [@enmengliu](https://discourse.jupyter.org/u/enmengliu)
#### Post date: [June 9, 2023, 12:59am UTC](https://discourse.jupyter.org/t/changing-the-background-color-of-markdown-cells/19775/1 "2023-06-09T00:59:26Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/9/954b9a4c4ecd42c767b30b0dd71400f89145b69f.png)

but for Markdown cells, it requires double click to get the new background color showing.  
 ![doubleclick](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/e/eab6e4e5ecb843b7f5eb21dc5fd9ad2cc1773627.gif)

Any help would be appreciated! Thank you in advance!

---

<div class="post-metadata">

### Author: ![psychemedia](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/psychemedia/32/24_2.png) [@psychemedia](https://discourse.jupyter.org/u/psychemedia)
#### Post date: [December 5, 2024, 1:37pm UTC](https://discourse.jupyter.org/t/changing-the-background-color-of-markdown-cells/19775/3 "2024-12-05T13:37:46Z")

</div>

I created an [extension](https://github.com/innovationOUtside/jupyterlab_empinken_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](https://github.com/parmentelat/jupyterlab-celltagsclasses) and then specify some `custom.css` in the .jupyter custom path.