Example of how to read notebook cell metadata and update cell CSS style

[psychemedia]

Is there a minimum viable example anywhere, ideally in Javascript, of how to:

• iterate each cell in a notebook;
• inspect the cell type;
• inspect the cell metadata, and in particular, cell tag metadata;
• update the cell CSS based on cell type and the presence or otherwise of particular style related tags, for example to style cells in a way reminiscent of Jupyter Book special content blocks.

For example, based on the above example, jb_style_note or jb_style_warning tags might trigger styling of correspondingly tagged notebook markdown cells. Or maybe just tags with much simpler associated styling such as setting the cell background and margin with a particular colour.

If that's not an appropriate model, is there an example of an extension that:

• reacts to an update to cell tag metadata;
• updates the cell styling based on the presence of particular tags.

As an aside, I also wonder if there is a playground anywhere (perhaps in docs on theming? Or in ipylab?) that shows how to style different parts of a notebook cell display?

[welcome[bot]]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

[jtpio]

Thanks @psychemedia for posting the issue here.

Maybe a good exercise here would be to take that classic notebook extension and port it to JupyterLab? https://github.com/innovationOUtside/nb_extension_tagstyler

In addition to this, there could be an additional section in the README of the extensions example repo to link to external projects. In that case there could be a link to the tagstyler lab extension but also to other extensions, for example the ones in the jupyterlab-contrib organization: https://github.com/jupyterlab-contrib

The idea would be to consolidate the range of examples, and point to real-world (published) extensions that would be more accessible than reading the JupyterLab source code.

[psychemedia]

Re: porting the classic nb extension, I've had several false starts trying to get started with JupyterLab extensions and still haven't seen a way in that makes me think I could make good progress and get something half way working in a half hour hack! (I'm really really wary of getting lost in things I really really don't understand...;-) Will have a look next time I have a half day clear...

[fcollonval]

Xref related issues:

• https://github.com/jupyterlab/jupyterlab/pull/8627
• https://github.com/jupyterlab/jupyterlab/pull/8410#issuecomment-631030585