Embedded cell loses CSS style

[ray]

Hi all,

I’m trying to embed cells from this notebook into a Jekyll blog. The embed had styling a few days ago but now it doesn’t. I made changes but unsure what exactly caused it to lose styling. Any ideas?

I tried these and couldn’t fix it:

• Not wrapping SVG with a div container
• Not using CSS custom properties
• Moving <style> above chart output

[bgchen]

Would you mind sharing the code you used to embed the notebook?

[ray]

I’m using the embed code without modifications:

Wrapped in div:

<div id="observablehq-46da78e1"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-46da78e1");
(new Runtime).module(define, name => (name === "leaderboard") && inspect());
</script>

SVG-only:

<div id="observablehq-2663ced7"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-2663ced7");
(new Runtime).module(define, name => (name === "chart") && inspect());
</script>

[bgchen]

So what’s happening here is that the style cell isn’t referenced by your chart and thus isn’t being rendered. Here are two options:

• Copy the contents of the style cell and include it in your HTML either via a <link rel="stylesheet"> tag in the head (if you save the styles to a separate .css file) or by putting the styles in a <style> tag.
• Or you can first name the style cell in your notebook e.g.:

myStyles = html`
<style>
/* ...

and then make sure that cell is rendered in your embed code:

<div id="observablehq-2663ced7"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-2663ced7");
(new Runtime).module(define, name => (name === "chart" || name === "myStyles") && inspect());
</script>

Hope that helps and welcome to the forums, by the way!

[ray]

Going with option 2 - named cell, and it works. Thank you and thanks for the welcome too!

It would be good to include your instructions in this notebook (cc @jashkenas).

[jashkenas]

@ray

It would be good to include your instructions in this notebook (cc @jashkenas).

Good idea! I’ve added a note about it to the section on Rendering Cells.

[elibenton]

Hi all,

I’m having two small issues with embedding a single cell from the following notebook in the following site hosted with Squarespace. The issues are:

1. On the first time a person visits the webpage, the embed does not load. All subsequent visits, the embed appears without issue, but never on a user’s first visit.
2. I would like to use Observable’s default CSS, but I cannot get it to load. I attempted to link it in a separate <style> tag as mentioned in this post, but that does not seem to do the trick for me.

Console for reference. Unfortunately, I don’t know what these warnings mean.

Thanks for any guidance y’all can provide!