diff --git a/draw.js b/draw.js
index eba5b99..ed9fb60 100644
--- a/draw.js
+++ b/draw.js
@@ -1,6 +1,10 @@
 class Drawing {
-  constructor(divId) {
-    this.div = document.getElementById(divId);
+  constructor(div) {
+    if (div instanceof HTMLElement) {
+      this.div = div;
+    } else {
+      this.div = document.getElementById(div);
+    }
     this.div.classList.add('drawing');
     this.div.classList.add('container');
     this.buttonsDiv = document.createElement('div');
@@ -54,7 +58,9 @@ class Drawing {
   }
 
   setTitle(title) {
-    this.titleDiv.innerHTML = title;
+    const h = document.createElement('h4');
+    h.innerHTML = title;
+    this.titleDiv.appendChild(h);
   }
 
   setCaption(caption) {
@@ -287,4 +293,69 @@ class Drawing {
       this.ctx.stroke();
     })
   }
+  
+  static fromText(node) {
+    const div = document.createElement('div');
+    node.parentNode.parentNode.insertBefore(div, node.parentNode);
+    node.style.display = 'none';
+    const d = new Drawing(div);
+    const lines = node.innerText.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.startsWith("#")) continue;
+      const [cmd, ...args] = line.split(' ');
+      // console.log({cmd, args});
+      switch (cmd) {
+        case 'title': {
+          d.setTitle(args.join(' '));
+        } break;
+        case 'caption': {
+          d.setCaption(args.join(' '));
+        } break;
+        case 'buttons': {
+          d.addButtons();
+        } break;
+        case 'frame': {
+          const [x1, y1, x2, y2] = args.map(x => parseInt(x));
+          d.setFrame([x1, y1], [x2, y2]);
+        } break;
+        case 'axes': {
+          const [x, y] = args.map(x => parseInt(x));
+          d.polyline([0, y], [0, 0], [x, 0]);
+        } break;
+        case 'stroke': {
+          const style = args[0];
+          const width = parseInt(args[1]);
+          d.setStroke(style, width);
+        } break;
+        case 'fill': {
+          const style = args[0];
+          d.setFill(style);
+        } break;
+        case 'point': {
+          const [name, ...rest] = args;
+          let body = rest.join(' ');
+          while (lines[i + 1].startsWith(' ')) {
+            body += lines[i + 1];
+            i += 1;
+          }
+          d.definePoint(name, () => {
+            return (function() {
+              return eval(body);
+            }).call(d);
+          });
+        } break;
+        case 'circle': 
+        case 'square': {
+          const p = args[0];
+          const traceAge = args[1] ? parseInt(args[1]) : 0;
+          d[cmd](p, {trace: {age: traceAge}});
+        } break;
+        case 'start': {
+          d.start();
+        } break;
+      }
+    }
+    d.render();
+  }
 }
\ No newline at end of file
diff --git a/reveal.html b/reveal.html
index 10e997b..98aec9a 100644
--- a/reveal.html
+++ b/reveal.html
@@ -16,17 +16,31 @@
 		<link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css">
 	</head>
 	<body>
+    <script src="./draw.js"></script>
 		<div class="reveal">
 			<div class="slides">
 				<section>
           <h2>Slide 1</h2>
           <p>Content... `a = b / c`</p>
+          <div id="d3"></div>
+          <script>
+            {
+              const d = new Drawing('d3');
+              d.setTitle('Test Drawing');
+              d.line([0, 0], [100, 100]);
+              d.render();
+            }
+          </script>
         </section>
 				<section data-markdown>
           <textarea data-template>
             ## Slide 2
             - Item 1
             - Item 2
+            ### Heading 3
+            #### Heading 4
+            ##### Heading 5
+            ###### Heading 6
             <div id="d1"></div>
             <script>
               {
@@ -48,7 +62,6 @@
 		<script src="./node_modules/reveal.js/plugin/markdown/markdown.js"></script>
 		<script src="./node_modules/reveal.js/plugin/highlight/highlight.js"></script>
     <script src="./node_modules/reveal.js/plugin/math/math.js"></script>
-    <script src="./draw.js"></script>
 		<script>
 			// More info about initialization & config:
 			// - https://revealjs.com/initialization/
@@ -63,7 +76,13 @@
         },
 				// Learn about plugins: https://revealjs.com/plugins/
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.MathJax3 ]
-			});
-		</script>
+			}).then(() => {
+        const nodes = document.querySelectorAll('code.drawing');
+        for (let node of nodes) {
+          Drawing.fromText(node);
+        }
+      });
+
+    </script>
 	</body>
 </html>
diff --git a/test.html b/test.html
index bee8324..aa5f943 100644
--- a/test.html
+++ b/test.html
@@ -23,7 +23,6 @@
       d1 = d;
       d.setTitle('Example Animation');
       d.setCaption('Lissajou figure (skewed)');
-      d.addButtons();
       d.setStroke('black', 4);
       d.polyline([0, 100], [0, 0], [100, 0]);
       d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000));
diff --git a/test.md b/test.md
index 237631a..9d494a1 100644
--- a/test.md
+++ b/test.md
@@ -1,3 +1,24 @@
 ## Slide 3
 
-Testing
\ No newline at end of file
+Testing
+
+<div id="d2"></div>
+
+```drawing
+title Test Drawing!
+caption This is a test
+buttons
+frame 0 0 200 100
+axes 200 100
+point p1 this.oscillatingPoint([20, 20], [80, 20], 3000)
+fill cyan
+square p1 1000
+point p2 [100, 30]
+fill red
+circle p2
+point p3 [ this.oscillatingValue(20, 80, 3000), 
+  this.oscillatingValue(20, 80, 3000, Math.PI/2) ]
+fill green
+circle p3 1000
+start
+```
\ No newline at end of file
