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';
}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 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 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.
I’ve done a couple of crude extensions for classic notebook exploring bits of this idea:
nb_extension_tagstyler — reuse tags as classes.nb_extension_empinken — highlight cells with different background colours from a toolbar button;I’ve started exploring how to set classes based on tags here. You can also sneak custom CSS files into JupyterLab using a dummy extension.