You can override the ${fmt('foreground color', {background: '#404040', color: 'ivory'})} by specifying an options object instead of a background color.
The options object can also be used define other css properties, like using an ${fmt('italic', {background: 'purple', fontStyle: 'italic'})} font style or adding ${fmt('more padding', {background: 'moccasin', color: 'navy', fontWeight: 200, borderRadius: "25px", padding: "0 10px"})}
note = ((contents) => htl.html`
<div style=${{border: "1px solid rgba(0, 0, 0, 0.05)", padding: "0.5rem", fontFamily: "var(--helvetica)", fontSize: "small", maxWidth: "500px", borderRadius: "4px", font: "15px/1.5em var(--helvetica)", color: "#444", boxSizing: "border-box", background: "hsl(55deg 80% 98%)"}}>
${contents}
</div>
`)
htmlNote = "EXAMPLE" , note(htl.html`<b><font size = "4">Note</b></font>: The <code>html</code> function is supported, but consider using the HTML cell mode available from the <a href="https://observablehq.com/@observablehq/adding-cells?collection=@observablehq/notebook-fundamentals">Add Cell menu</a>, which allows you to type HTML code without the <code>html</code> keyword and without needing to enclose the text in backticks.`)
vegaData = require("vega-datasets@1", "vega-datasets@2") // import vega_datasets
import { toc as contents } from "@jonfroehlich/collapsible-toc"
function toc(selector = "h1,h2,h3,h4", heading = "<b>Table of Contents</b>", startOpen = true) {
return Generators.observe(notify => {
let headings = [];
let detailsOpen = startOpen ? "open" : "";
function observed() {
const h = Array.from(document.querySelectorAll(selector));
if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {
notify(html`<details ${detailsOpen}><summary>${heading}</summary><ol>${Array.from(headings = h, h => {
// this level is taken from https://observablehq.com/@matthewkenny/toc
const level = parseInt(h.tagName.slice(1)) - 1;
return Object.assign(
html`${level > 1 ? '<ul>'.repeat(level-1) + '<li>' : '<li>'}<a href=#${h.id}>${DOM.text(h.textContent)}`,
{onclick: e => (e.preventDefault(), h.scrollIntoView())}
);
})}`);
}
}
const observer = new MutationObserver(observed);
observer.observe(document.body, {childList: true, subtree: true});
observed();
return () => observer.disconnect();
});
}
import { showMe } from "@observablehq/show-me"
import {style, selectingCells} from "@observablehq/keyboard-shortcuts"
import { try_it } from "@observablehq/notes"
import {vegaDataViewer} from "@pbiqueryous-repo/vega-data-viewer"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
