Software developer and power user
d3.treeDark, ExpressionsAll Roads Lead to RomeNatural Earth ScalesLayer CakeHello, ChessgroundOne Small StepPortable Game NotationBootstrap IconsBootstrap Icon InspectorHow Deep Is Your Zoom?Map Projection DistortionMap Projection ClassificationPhonetic AlphabetMorse-o-MaticWe Are FamilyRoyal LongevityStackShare Tools, CategorizedStackShare Tool CategoriesStackShare Tool LogosStackShare ToolsStackShare APIHello, Schema.orgLifetime TimelinePrinting NotebooksSynchronized SliderFeather Icon InspectorProgress Bar
Hello, Prism(.js)
themes = {
const requests = themeLiterals.map(async ([label, stylesheet]) => {
return {
label,
value: await fetchTheme(stylesheet)
};
});
return Promise.all(requests);
}
themeLiterals = [
["Coy", "prism-coy.css"],
["Dark", "prism-dark.css"],
["Default", "prism.css"],
["Funky", "prism-funky.css"],
["Okaidia", "prism-okaidia.css"],
["Solarized Light", "prism-solarizedlight.css"],
["Tomorrow Night", "prism-tomorrow.css"],
["Twilight", "prism-twilight.css"]
];
fetchTheme = (stylesheet) => {
const url = `${packageDirectory}themes/${stylesheet}`;
return fetch(url).then(response => response.text());
}
// gets the navigable directory listing on its own
packageDirectory = "https://cdn.jsdelivr.net/npm/prismjs@1/"
// see: https://stackoverflow.com/a/9251169/14273692
escapeHtml = {
const escape = document.createElement('textarea');
const escapeHtml = (htmlString) => {
escape.textContent = htmlString;
return escape.innerHTML;
};
return escapeHtml;
}
// 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 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}`;
}
Prism = {
// minified version auto-generated by jsDelivr (not part of the package)
const Prism = await require(`${packageDirectory}prism.min.js`).catch(() => window.Prism);
// https://github.com/observablehq/stdlib#require uses jsDelivr by default
await require(`${packageDirectory}plugins/line-numbers/prism-line-numbers.min.js`).catch(() => {});
if (plugins.includes("show-invisibles")) {
await require(`${packageDirectory}plugins/show-invisibles/prism-show-invisibles.min.js`).catch(() => {});
}
return Prism;
}
html`<link rel="stylesheet" href="${packageDirectory}plugins/line-numbers/prism-line-numbers.css">`
html`<link rel="stylesheet" href="${packageDirectory}plugins/show-invisibles/prism-show-invisibles.css">`
html`<style>
.code {
font-size: 14px;
}
${theme}
</style>`
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.
