// see: https://prismjs.com/#basic-usage
codeBlock = (code, language) => {
const showLineNumbers = plugins.includes("line-numbers");
const container = createCodeBlock(code, language, showLineNumbers);
Prism.highlightAllUnder(container);
return html`
${renderStyleConfig(theme)}
${container}
`;
}
createCodeBlock = (code, language, showLineNumbers) => {
const codeClassName = `language-${language}`;
let blockClassNames = codeClassName;
if (showLineNumbers) {
blockClassNames += " line-numbers";
}
// avoid whitespace between 'pre' and 'code' elements
const literal = `
<div class="code">
<pre class="${blockClassNames}"><code class="${codeClassName}">${code}</code></pre>
</div>`;
return html`${literal}`;
}
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.
