# 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](https://github.com/syntax-tree/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.

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

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

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