<link rel="stylesheet" href="/css/prism-material-oceanic.css">
<style>
.charwrap:not(.typed) {
display: none;
}
</style>

<iframe></iframe>

{% highlightCharacterWrap html %}
slkdjflkdjsklfjkldsjflsdk
{% endhighlightCharacterWrap %}

<script>
document.addEventListener("keydown", function(e) {
let nextCharacter = document.querySelector(".charwrap:not(.typed)");
if(nextCharacter) {
nextCharacter.classList.add("typed");
}

let typedCharacters = document.querySelectorAll(".charwrap.typed");
let content = [...typedCharacters].map(entry => entry.textContent).join("");
document.querySelector("iframe").setAttribute("srcdoc", content);
});
</script>