notes/2f745a1cb424723ce4f13f90.md

Markdown-based Code Playground

This is a simple Markdown-based code playground.

It combines HTML, CSS, and JavaScript like CodePen, but rather than getting it from, separate panes, it takes it from Markdown code blocks.

It uses mdast-util-from-markdown to extract the code blocks, combines them into an HTML string, and places it as a srcdoc in an iframe at the bottom of the page.

<div class="hello">
  Hello, <span id="name">name</span>.
</div>

.hello {
  background-color: #aaf;
  border-radius: 5px;
  padding: 3px 5px;
}

document.getElementById('name').innerText = 'World';