# Style cells according to a tag in their metadata

**URL:** <https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455>\
**Category:** General\
**Created:** [October 20, 2020, 11:51pm UTC](https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455 "2020-10-20T23:51:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Laila\_Glez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/laila_glez/32/2915_2.png) [@Laila\_Glez](https://discourse.jupyter.org/u/Laila_Glez)\
**Post date:** [October 20, 2020, 11:51pm UTC](https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455/1 "2020-10-20T23:51:46Z")

</div>

I’d like to style cells differently according to the tag in their metadata.

I can modify the style of a cell using javascript, but the metadata information isn’t available in the notebook HTML. Is there a way to transfer cell tag metadata to JupyterLab notebook HTML or a different way to highlight certain cells in a notebook?

```
%%javascript
var a = document.querySelectorAll('.jp-Editor');
for (var i = 0; i < a.length; i++) {
    a[i].style.background='honeydew';
}
```

---

<div class="post-metadata">

**Author:** ![Telorast](https://avatars.discourse-cdn.com/v4/letter/t/aeb1de/32.png) [@Telorast](https://discourse.jupyter.org/u/Telorast)\
**Post date:** [October 22, 2020, 10:58am UTC](https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455/2 "2020-10-22T10:58:04Z")

</div>

Someone could correct me but I don’t think it is possible without an extension.

I wanted to do the exact same thing myself and made [this](https://gitlab.com/rafelyall/celltag2dom) while figuring out how to go about making JupyterLab extensions. It will only transfer cell tag info as a new class on to the cell HTML elements, but I have been using the [Custom CSS](https://github.com/wallneradam/jupyterlab-custom-css) extension to then style these tagged cells (you can change pretty much anything). Someone who _actually_ knows what they are doing could probably make an improved version of something like this - for one thing I can’t work out how to modify the notebook when it is launched, which would at least make the changes appear to be persistent.

---

<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:** [October 22, 2020, 6:23pm UTC](https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455/3 "2020-10-22T18:23:33Z")

</div>

I’ve done a couple of crude extensions for classic notebook exploring bits of this idea:

- [`nb_extension_tagstyler`](https://github.com/innovationOUtside/nb_extension_tagstyler) — reuse tags as classes.
- [`nb_extension_empinken`](https://github.com/innovationOUtside/nb_extension_empinken) — highlight cells with different background colours from a toolbar button;

---

<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:** [April 7, 2022, 7:43pm UTC](https://discourse.jupyter.org/t/style-cells-according-to-a-tag-in-their-metadata/6455/4 "2022-04-07T19:43:27Z")

</div>

I’ve started exploring how to set classes based on tags [here](https://blog.ouseful.info/2022/04/07/notes-on-the-jupyterlab-notebook-html-dom-model-part-3-setting-classes-based-on-cell-tags-from-jupyterlab-extensions/). You can also sneak custom CSS files into JupyterLab using a [dummy extension](https://blog.ouseful.info/2022/03/28/finally-simple-custom-styled-markdown-cells-in-jupyterlab/).