<script>
import Prism from 'prismjs';
function highlight(node, str) {
function h(str) {
node.innerHTML = Prism.highlight(str.trim(), Prism.languages.html)
.split('\n')
.map(line => line.replace(/^(\s+)/, (_, m) => '<span class="tab"></span>'.repeat(m.length)))
.join('<br />');
}
h(str);
return {
update(str) {
h(str);
}
}
}
let i = 0;
setInterval(() => {
i = (i + 1) % (lines.length + 1);
}, 2000);
const lines = [
` <feMorphology
operator="dilate"
radius="4"
result="THICK" />`,
` <feComposite
in="THICK" in2="SourceGraphic"
operator="out" />`,
]
</script>
<div class="canvas">
<h1 style="filter: url(#outline)">Hello World</h1>