Add '2f745a1cb424723ce4f13f90.md'

2f745a1cb424723ce4f13f90.md

@@ -0,0 +1,30 @@
+# 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';
+```