Web developer and autodidact with an interest in creative coding.
Public
Edited
Apr 21, 2023
Paused
Importers
20 stars
markLines(exampleText, [1, 2], 'js')
markLines(exampleText, [1, 2], { language: 'js', span: true})
markRanges(exampleText, [[16, 26], [57, 92]], 'js')
markRanges(exampleText, [[16, 26, '#FDF'], [57, 92, '#CFC']], {
language: 'js',
wrap: (contents, color) => html`<mark style="background:${color}">${contents}`
})
markMatches(exampleText, /\([^()]*\)/g, 'js')
{
const styleInitial = 'box-shadow: none; border-radius: 4px; padding: 2px; background: none; transition: all 500ms';
const styleActive = 'background: #ff0; box-shadow: 0 2px 5px -1px #550a';
const lines = [];
// Data equals the current line number.
const wrap = (contents, data) => {
const node = html`<mark style="${styleInitial}">${contents}`;
node.index = data;
lines.push(node);
return node;
};
const block = markLines(exampleText, true, {wrap, language: 'js'});
lines.sort((a, b) => a.index - b.index);
let n = -1;
while(true) {
if(lines[n]) lines[n].style.cssText += styleInitial;
n = (n + 1) % lines.length;
lines[n].style.cssText += styleActive;
yield block;
await Promises.delay(1000);
}
}
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.
