How to set the background color of a cell

[magrawala]

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?

[radames]

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?

[mbostock]

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:

Custom Inspector

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.

Styled Inspector

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.

[magrawala]

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.

[mbostock]

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

[mootari]

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:

Pitch! slideshows with transitions

[magrawala]

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.

[hellonearthis]

I was just thinking about this too. For me having the Markdown use a different background colour would help with the users visual clues in understanding a document.

Having a class connected to the cell that related to the cell type Javascript, Markdown, HTML, TeX. Would make it easy for a notebook to have a styles css cell that could define that classes colour.

Having a way to adjust the colours would also help in showing which cells are more important or that a cell has a relation to another cell is not just boilerplate.

Might seem like a bit of a visual overload but my ADHD brain enjoys that kind of loading.

Or have missed something simple and overlooked that Markdown can use HTML and I could just use the desired colour in there.

<div style="background-color:#C0FDFB;">

It seems to work but very hackery as adding a closing div to the MD cell caused issues.

using a cell to create a colour makes it easier to change all the colour.

<div style="background-color:#${md_colour};">