In the previous posts in this series, I explored the HTML DOM structure of rendered notebook markdown and code cells, and looked at how we might set DOM element class tags based on notebook cell metadata tags. In this post, I’ll see how we might style notebook cells using custom CSS rules.
To simplify testing new CSS rules, I’ll do all the work in the borwser. In my Chrome browser, the developer tools panel (raised from the View > Developer menu) allows you to inspect elements in the web page, view the CSS that applies to them, and edit and create custom CSS rules that are applied without reloading the page:
This means its easy enough to just mess around with rules and see how they work.
To cell cell backgrounds that “join up” across contiguous cells, we can apply a new background rule to the .tag-TAG-markdown-node and .tag-TAG-code-node elements, as shown above. The !important phrase allows us to over-ride the background settings that are applied onto elements further down the DOM branch. Obviously, this is not a theme sensitive solution, but this is my extension, and if it only works in certain themes, then that’s only where it works.
Thinking about how we might style things for a code cell execution status indicator extension, the input area prompt looks sensible:
As to how to get a custom CSS file into an extension, I’ve already got a sketch for that here.
So that’s pretty much it for how to actually add rendered custom style…
In the next post in this series, I’ll look at how we can add some buttons to the browser that will toggle metadata and tag state on the notebook so that we can add tags at the click of a button that can be classed as class attributes for which have have pre-defined style rules. (This is essentially the last step we need for something like an empinken extension.)
OUseful.Info, the blog... 