🏠 back to Observable

How to set the background color of a cell

Is there simple way to set the background color of a cell. For an html cell I know that I can set the background color of a div or a span. But what about a javascript cell?

HI @magrawala, you can construct any sort of HTML element as cells values then set its style properties, for example you can build an HTML div element and set its background color

cell = {
  const el = DOM.element('div');
  el.style.backgroundColor = 'lightsalmon';
  el.style.height = '100px';
  return el;
}

or a svg cell

s = {
  const svg = DOM.svg(width, 100);
  svg.style.backgroundColor = 'lightsalmon';
  svg.style.height = '100px';
  return svg;
}

However, I’m not sure what do you mean by a javascript cell?

The short answer is no: Observable doesn’t let you customize the behavior of the built-in inspector, so if a cell evaluates to something other than an HTML element, then it’ll be displayed in the standard inspector style.

The longer answer is that you can display a JavaScript value however you like, provided you convert it to an HTML element yourself rather than relying on the built-in inspector. (But you can bootstrap from our open-source inspector.)

And if you combine that with a view, then the JavaScript value will be available to other cells in your notebook like normal.

Here’s the live code:

I don’t think I would recommend this approach, however, as it requires your cells to have some extra cruft (calls to inspect(…) and viewof, and also you have to pass the inspector the name of the cell manually).

It’s also possible to override the global styles, but this also isn’t recommended because it may break when these styles change in the future, and it means your notebook is unlikely to work when imported or embedded.

If you’re willing to share a little more context about why you’d like to style the JavaScript cells I might have better ideas. :slight_smile:

3 Likes

That is helpful. We are basically trying to build Vega-Lite and D3 tutorials where we want to include Excercises and I was trying to figure out a way to color the background of the cells that both describe the exercise (usually an md or html cell) and provide some setup (e.g. a bit of javascript to load data and display it using printTable())

For example in this fork of the UW Vega-Lite tutorial https://observablehq.com/d/3baacc129a4ed9cc I’d ideally like to make all cells related to the Exercise have a “cornsilk” background. I figured how to do this for the heading, and even for the entire md/html cell, from your description above it sounds like it would add a lot of cruft to color the background for the javascript cells.

Not a big concern, just wanted to see if I was missing some simple way to do it.

Ah, interesting. So ideally you’d like to set the color of the editor, not the inspector output?

While it does not directly address your question, there may be an alternative. A while ago @enkimute published a Slide helper (based on @mbostock’s Slide notebook) that allows you to combine slides and editor fields, and supports transitions without requiring fullscreen:

I was hoping to set the background of the inspector to some color (other than the default white) so that readers could easily scan for those cells. Setting the background of the editor (to something other than grey) would also potentially be useful, but less important for the use case I was thinking of.