From 1919b8c387187dc758ab72b63bd5c703b509c4c8 Mon Sep 17 00:00:00 2001
From: ben <ben@benatkin.com>
Date: Sun, 6 Jun 2021 02:14:20 +0000
Subject: [PATCH] Add '2f745a1cb424723ce4f13f90.md'

---
 2f745a1cb424723ce4f13f90.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 2f745a1cb424723ce4f13f90.md

diff --git a/2f745a1cb424723ce4f13f90.md b/2f745a1cb424723ce4f13f90.md
new file mode 100644
index 0000000..e8367f9
--- /dev/null
+++ b/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';
+```
\ No newline at end of file