From e7073bc5d946709c378a6937ca09745fe273152b Mon Sep 17 00:00:00 2001
From: Geoffrey Booth <webmaster@geoffreybooth.com>
Date: Thu, 7 Sep 2017 08:05:04 -0700
Subject: [PATCH] Update CS2 docs per #4688

---
 docs/v2/index.html | 2025 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 1746 insertions(+), 279 deletions(-)

diff --git a/docs/v2/index.html b/docs/v2/index.html
index 397a7e15ca..c4ed852cc4 100644
--- a/docs/v2/index.html
+++ b/docs/v2/index.html
@@ -18,8 +18,6 @@
 <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800|Lato:300,300i,400,700|Roboto+Mono:400,400i" rel="stylesheet" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/codemirror/4.5.0/codemirror.css" crossorigin="anonymous">
 <style>
-/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css and http://v4-alpha.getbootstrap.com/examples/offcanvas/offcanvas.css */
-
 html,
 body {
   /* Prevent scroll on narrow devices */
@@ -71,7 +69,7 @@
  */
 .site-navbar {
   height: 3.5rem;
-  font-family: Lato;
+  font-family: 'Lato';
   font-weight: 400;
   font-size: 1.1em;
 }
@@ -106,43 +104,38 @@
  */
 
 .sidebar {
-  background-color: #efebe9;
-  border-right: 1px solid #efebe9;
-  top: 3.5rem;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  display: block;
-  padding: 0;
-}
-.sidebar .contents {
-  height: 100%;
+  position: fixed;
+  top: 3.5em;
+  height: calc(100% - 3.5rem);
   /* Scrollable contents if viewport is shorter than content */
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0.5em 0 0.5em 0.3em;
-  font-family: 'Alegreya Sans';
-  font-weight: 400;
-  font-size: 1.2em;
-  align-items: normal;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  padding: 0;
+  background-color: #efebe9;
+  border-right: 1px solid #efebe9;
 }
-.sidebar .contents::-webkit-scrollbar {
+.sidebar::-webkit-scrollbar {
   display: none;
 }
 @media screen and (max-width: 991px) {
-  .sidebar .contents {
-    position: fixed;
-    height: calc(100% - 3.5rem);
-  }
-}
-@media screen and (min-width: 992px) {
   .sidebar {
-    position: fixed;
+    left: -100%;
+    transition: 0.25s left ease-in-out;
+  }
+  .sidebar.show {
+    left: 0;
   }
 }
 
-.contents-column {
-  display: block;
+.contents {
+  padding: 0.5em 0 0.5em 0.5em;
+  font-family: 'Alegreya Sans';
+  font-weight: 400;
+  font-size: 1.2em;
+  align-items: normal;
 }
 
 .contents .nav .nav {
@@ -161,44 +154,6 @@
 }
 
 
-/*
- * Off Canvas
- */
-@media screen and (max-width: 991px) {
-  .row-offcanvas {
-    position: relative;
-    transition: all .25s ease-in-out;
-  }
-  .row-offcanvas-left {
-    left: 0;
-  }
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-  }
-}
-@media screen and (max-width: 767px) {
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: -100%;
-  }
-  .row-offcanvas-left.show {
-    left: calc(100% + 30px)
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 991px) {
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: calc(-66.667% - 15px);
-    width: 66.667%;
-  }
-  .row-offcanvas-left.show {
-    left: calc(66.667% + 30px);
-  }
-  .row-offcanvas-left .sidebar-offcanvas .contents {
-    width: 66.667%;
-  }
-}
-
-
 /*
  * Main content
  */
@@ -331,7 +286,12 @@
   outline: 0;
 }
 
-.CodeMirror {
+.play-button {
+  height: 1em;
+}
+
+.CodeMirror,
+.placeholder-code {
   /* https://codemirror.net/demo/resize.html */
   height: auto;
   background: transparent;
@@ -341,7 +301,8 @@
   font-size: 0.9em;
 }
 @media (min-width: 768px) {
-  .CodeMirror {
+  .CodeMirror,
+  .placeholder-code {
     font-size: 1em;
   }
 }
@@ -411,42 +372,67 @@
 
 /* Adapted from https://github.com/FarhadG/code-mirror-themes/blob/master/themes/twilight.css */
 
-.cm-s-twilight {
+.CodeMirror,
+.placeholder-code {
   letter-spacing: 0.3px;
   color: #f8f8f8;
+  /* Prevent mobile Safari from zooming in on our code editors; the code is 16px naturally, but somehow being explicit about it prevents the zooming */
+  font-size: 16px;
 }
-.cm-s-twilight .CodeMirror-lines {
+.CodeMirror-lines {
   padding: 0.5em 0;
 }
-.cm-s-twilight div.CodeMirror-cursor {
+.placeholder-code {
+  padding: 0.5em 4px;
+  margin-bottom: 1.3rem;
+  white-space: pre-wrap;
+}
+div.CodeMirror-cursor {
   border-left: 3px solid #f8f8f8;
 }
-.cm-s-twilight .CodeMirror-activeline-background {
+.CodeMirror-activeline-background {
   background: #ffffff08;
 }
-.cm-s-twilight .CodeMirror-selected {
+.CodeMirror-selected {
   background: #ddf0ff33;
 }
-.cm-s-twilight .cm-comment {
+.cm-comment,
+.placeholder-code .comment {
   font-style: italic;
   color: #5f5a60;
 }
-.cm-s-twilight .cm-keyword {
+.cm-keyword,
+.placeholder-code .keyword {
   color: #cda869;
 }
-.cm-s-twilight .cm-string {
+.cm-string,
+.placeholder-code .string {
   color: #8f9d6a;
 }
-.cm-s-twilight .cm-property {
+.cm-property,
+.placeholder-code .attribute {
   color: #dad085;
 }
-.cm-s-twilight .cm-atom {
+.cm-atom {
   color: #dad085;
 }
-.cm-s-twilight .cm-number {
+.cm-number,
+.placeholder-code .number,
+.placeholder-code .built_in,
+.placeholder-code .builtin-name,
+.placeholder-code .literal,
+.placeholder-code .type,
+/*.placeholder-code .params,*/
+.placeholder-code .meta,
+.placeholder-code .link {
   color: #dad085;
 }
-.cm-s-twilight .cm-operator {
+.cm-operator,
+.placeholder-code .punctuation,
+.placeholder-code .symbol,
+.placeholder-code .bullet,
+.placeholder-code .addition,
+.placeholder-code .operator {
   color: #cda869;
 }
 
@@ -492,10 +478,10 @@
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark bg-ribbed-dark site-navbar">
   <a class="navbar-brand" href="#" data-close="try"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-22 347 566 100">
-	<title>
-		CoffeeScript Logo
-	</title>
-	<path d="M21.7 351.1c.1.6-.2 1.1-1.2 1.6-1.3-.7-4.1-1.1-6.4-.9-2.5.2-4.6 1-4.3 2.7.4 1.7 2.8 2.7 7.1 2.3 10.5-.9 10.4-8 25.8-9.4 12-1.1 18.7 2.6 19.6 7.1.7 3.5-2.2 6.9-10.9 7.6-7.7.7-12.2-1.4-12.6-3.5-.2-1.1.4-2.7 4.1-3.1.4 1.7 2.5 3.5 7.5 3 3.6-.3 6.6-1.6 6.2-3.6-.4-2.1-4.2-3.3-10.2-2.8-12.2 1.1-15.2 7.8-25.6 8.7-7.4.7-13.4-2-14.2-6-.3-1.5-.3-5 7.5-5.7 4-.3 7.2.4 7.6 2zm-39 41.8c-3.4 4.3-4.9 9.3-4.6 14.2.3 4.9 2.7 8.9 6.5 12 4 3.1 8.3 4 13.2 3.1 1.9-.3 4-1.3 5.9-1.9-4 0-7.4-1.3-10.8-4-3.7-2.7-6.2-6.5-6.8-11.1-.9-4.3 0-8.3 2.4-11.8 2.7-3.4 6.2-5.3 10.8-5.9 4.6-.3 8.6.9 12.6 3.7-.9-1.3-2.2-2.2-3.4-3.4-4-2.7-8.3-4-13.6-2.7-4.8 1-8.8 3.5-12.2 7.8zm53.6-23.1c-12.9 0-24.4-1.3-32.7-3.1-8.9-2.2-13.6-4.6-13.6-7.7 0-1.3.6-2.4 2.4-3.7-5.6 2.2-8.6 4-8.6 6.8.3 3.1 5.3 6.2 15.5 8.6 9.6 2.4 21.9 3.7 36.7 3.7 15.1 0 27.1-1.3 36.7-3.7 10.2-2.4 15.1-5.6 15.1-8.6 0-2.2-2.2-4.3-6.2-5.9.9.6 1.6 1.6 1.6 2.7 0 3.1-4.6 5.6-13.9 7.7-8.6 1.9-19.6 3.2-33 3.2zm36.8 8.6c-9.6 2.2-21.9 3.7-36.7 3.7-15.1 0-27.4-1.6-37-3.7-8.6-2.2-13.2-4.6-14.8-7.1 1.6 10.8 5.3 21 10.2 30 3.7 5.6 7.4 10.5 11.1 15.8 1.6 3.1 2.7 6.2 3.4 9.3 2.4 3.4 5.9 5.6 10.2 6.8 5.3 1.9 10.8 2.7 16.4 2.4h.6c5.6.3 11.5-.6 16.9-2.4 4-1.3 7.4-3.4 9.9-6.8h.3c.6-3.1 1.6-6.2 3.1-9.3 3.7-5.3 7.4-10.2 11.1-15.8 4.9-8.9 8.3-19.1 10.2-30-2 2.8-6.6 5.2-14.9 7.1zm106.2 30.1c-4.8 12.1-17.6 16.9-25.9 16.9-13.4 0-19.9-6-19.9-22.3 0-16.5 7.9-47.3 31.7-47.3 8.5 0 15.2 3.3 15.2 12.1 0 4.8-1.8 8.3-6.4 8.3-1.5 0-3.4-.4-5.2-2.4 2.2-1.1 4.2-4.9 4.2-8.3 0-2.9-1.5-5.6-5.6-5.6-10 0-18.9 23.9-18.9 42.4 0 8.3 2.2 14.2 10.9 14.2 7.1 0 13.5-3.4 17.7-9.1l2.2 1.1zm32.9-16.3c.4.2.7.2 1 .2 4.2 0 10.1-2.7 14-5.5l.8 2.4c-3.4 3.7-9.5 6.5-16.1 7.5-1.5 16.8-10.6 27.3-21.7 27.3-8.4 0-14.5-4-14.5-14.4 0-10.5 6.2-32.2 24.9-32.2 7.8.3 11.6 5.3 11.6 14.7zm-7.7 5c-1.9-.5-2.4-2-2.4-3.8 0-2.5 1.2-4.2 2.8-4.9-.2-3.8-1.1-5.3-3.4-5.3-6.5 0-12 16.6-12 25.6 0 6 1.2 7.3 4.6 7.3 4.2.1 8.9-8 10.4-18.9zm-6.6 39.7c0-8.3 7.1-11 15.8-13.6l10.9-51.9c2.7-13 10.6-15.5 16.5-15.5 4.1 0 8 2.2 9.7 5.7 3.6-4.6 8.4-5.7 12.4-5.7 5.6 0 10.8 3.9 10.8 9.8 0 1.5-.1 2.6-.3 3.7h-4.3c.1-.9.2-1.7.2-2.4 0-2.1-1.7-3.1-3.4-3.1-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9.1l-.8 3.6h-9l-10.3 49.1c-2.7 13-10.6 15.5-16.5 15.5-5.2 0-8.3-2.3-9.8-5.7-3.5 4.6-8.3 5.7-12.3 5.7-5.6.1-10.8-3.8-10.8-9.7zm9.1 1.8c1.9 0 4.2-1.8 5.4-7.1l1.1-5.3c-5.7 2-10.1 4.4-10.1 9.4 0 1.2 1.7 3 3.6 3zm21.7 0c1.9 0 4.2-1.8 5.4-7.1l2.2-10.4-9.4 1.8-1.8 8.3c-.5 2.1-1.1 4-1.8 5.6.9 1.3 3 1.8 5.4 1.8zm-1.4-18l9.4-1.7 7.7-36.8h-9l-8.1 38.5zm16.6-56.7c-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9l2.1-9.5c.2-.7.2-1.3.2-2 .1-2-1.5-3-3.4-3zm37.9 53c7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.5-10 18.5-20.9 19.2-.1 1.3-.2 2.5-.2 3.6 0 6.2 2.2 7.7 6.5 7.7zm5.3-34.4c-4.6 0-9.1 9.7-10.9 18.7 7-.5 13.2-7.4 13.2-15 0-2.2-.5-3.7-2.3-3.7zm28.6 33.4c3.4 0 7.8-2.3 10.8-4.8-2 10.4-8.4 13.4-15.8 13.4-8.4 0-14.1-4.2-14.1-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.6-10 18.5-20.9 19.2-.1.9-.2 2-.2 2.7 0 5.7 2.5 7.6 5.6 7.6zm6.2-33.4c-4.5 0-9.1 10.1-11 18.7 7.1-.4 13.3-7.3 13.3-15 0-2.2-.6-3.7-2.3-3.7zm51.3-6.7c-1.7 0-3-.6-4.2-1.9 2.4-1.5 4.1-4.8 4.1-7.8 0-3.1-1.8-6.1-6.8-6.1s-8.3 2.8-8.3 8.2c0 13.3 20.5 15.2 20.5 34.8 0 15.3-12.3 22.7-25.6 22.7-10.4 0-19.3-4.5-19.3-15.7 0-9.8 7-14.9 13.3-14.9 3.1 0 7.7 1.3 8 6-4.9 0-10.7 2.3-10.7 8.5 0 4.5 2.9 8.7 8.7 8.7 6.1 0 10.6-4.4 10.6-12 0-15.6-18.6-21.1-18.6-34.5 0-9.5 9.3-16.3 21-16.3 4.3 0 14.6.9 14.6 10.9.1 5.5-2.8 9.4-7.3 9.4zm36.2 10.3c0-2.3-.8-3.7-2.5-3.7-5.7 0-11.7 16.6-11.7 26.7 0 6.2 2.2 7.6 6.6 7.6 7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.6 6-32.3 24.5-32.3 8.1 0 10.1 4.2 10.1 8.3 0 4.4-2.2 6.7-4.8 6.7-1 0-2.1-.4-3.1-1.1.5-1.9.9-3.6.9-5.3zm27.7-7.6l-1.2 5.7c3.1-2.7 6.7-5.7 11-5.7 4.1 0 6.3 3.3 6.3 6.9 0 3.1-2.1 6.7-6.6 6.7-5.1 0-2.5-6-5.3-6-2.7 0-4.4 1.4-6.7 3.4l-7.2 34.6h-13.1l9.6-45.4 13.2-.2zm34.2 0l-6.6 30.9c-.3 1.2-.4 2.1-.4 2.9 0 2.5 1.2 3.3 3.7 3.3 3.5 0 6.9-3.4 8.1-8h3.8c-5.2 14.8-14.2 16.8-19.1 16.8-5.5 0-9.7-3.2-9.7-10.9 0-1.8.3-3.7.7-5.9l6.2-29.2 13.3.1zm-4.1-19.4c4 0 7.2 3.2 7.2 7.2s-3.2 7.1-7.2 7.1-7.1-3.1-7.1-7.1c-.1-4 3.2-7.2 7.1-7.2zm29.1 16l-1.5 6.9c2.6-2.3 6.1-3.9 10.7-3.9 6.2 0 11.1 3.5 11.1 14.4 0 12.2-4.7 32.1-22.3 32.1-4.5 0-6.8-1.6-7.7-3.2l-4.7 22.1-13.7 3.2 15.2-71.5 12.9-.1zm7.8 17c0-7-2.9-7.5-4.5-7.5-2 0-4.5 1.6-6.3 4.4l-5.4 25.5c.4 1 1.4 2.1 3.4 2.1 9.7 0 12.8-15.9 12.8-24.5zm27.8 17.3c-.3 1.1-.5 2.2-.5 3.1 0 1.9.7 3.2 3.1 3.2.7 0 1.7 0 2.4-.3-2.5 7.8-6.6 8.9-9.6 8.9-6.4 0-9.1-4.4-9.1-10.3 0-1.6.2-3.1.6-4.8l5.8-27.2h-3l.7-3.6h3L528 366l13.4-1.9s-1.4 6.2-3.1 14.4h5.5l-.7 3.6h-5.5l-5.7 27.4z"/>
+  <title>
+    CoffeeScript Logo
+  </title>
+  <path d="M21.7 351.1c.1.6-.2 1.1-1.2 1.6-1.3-.7-4.1-1.1-6.4-.9-2.5.2-4.6 1-4.3 2.7.4 1.7 2.8 2.7 7.1 2.3 10.5-.9 10.4-8 25.8-9.4 12-1.1 18.7 2.6 19.6 7.1.7 3.5-2.2 6.9-10.9 7.6-7.7.7-12.2-1.4-12.6-3.5-.2-1.1.4-2.7 4.1-3.1.4 1.7 2.5 3.5 7.5 3 3.6-.3 6.6-1.6 6.2-3.6-.4-2.1-4.2-3.3-10.2-2.8-12.2 1.1-15.2 7.8-25.6 8.7-7.4.7-13.4-2-14.2-6-.3-1.5-.3-5 7.5-5.7 4-.3 7.2.4 7.6 2zm-39 41.8c-3.4 4.3-4.9 9.3-4.6 14.2.3 4.9 2.7 8.9 6.5 12 4 3.1 8.3 4 13.2 3.1 1.9-.3 4-1.3 5.9-1.9-4 0-7.4-1.3-10.8-4-3.7-2.7-6.2-6.5-6.8-11.1-.9-4.3 0-8.3 2.4-11.8 2.7-3.4 6.2-5.3 10.8-5.9 4.6-.3 8.6.9 12.6 3.7-.9-1.3-2.2-2.2-3.4-3.4-4-2.7-8.3-4-13.6-2.7-4.8 1-8.8 3.5-12.2 7.8zm53.6-23.1c-12.9 0-24.4-1.3-32.7-3.1-8.9-2.2-13.6-4.6-13.6-7.7 0-1.3.6-2.4 2.4-3.7-5.6 2.2-8.6 4-8.6 6.8.3 3.1 5.3 6.2 15.5 8.6 9.6 2.4 21.9 3.7 36.7 3.7 15.1 0 27.1-1.3 36.7-3.7 10.2-2.4 15.1-5.6 15.1-8.6 0-2.2-2.2-4.3-6.2-5.9.9.6 1.6 1.6 1.6 2.7 0 3.1-4.6 5.6-13.9 7.7-8.6 1.9-19.6 3.2-33 3.2zm36.8 8.6c-9.6 2.2-21.9 3.7-36.7 3.7-15.1 0-27.4-1.6-37-3.7-8.6-2.2-13.2-4.6-14.8-7.1 1.6 10.8 5.3 21 10.2 30 3.7 5.6 7.4 10.5 11.1 15.8 1.6 3.1 2.7 6.2 3.4 9.3 2.4 3.4 5.9 5.6 10.2 6.8 5.3 1.9 10.8 2.7 16.4 2.4h.6c5.6.3 11.5-.6 16.9-2.4 4-1.3 7.4-3.4 9.9-6.8h.3c.6-3.1 1.6-6.2 3.1-9.3 3.7-5.3 7.4-10.2 11.1-15.8 4.9-8.9 8.3-19.1 10.2-30-2 2.8-6.6 5.2-14.9 7.1zm106.2 30.1c-4.8 12.1-17.6 16.9-25.9 16.9-13.4 0-19.9-6-19.9-22.3 0-16.5 7.9-47.3 31.7-47.3 8.5 0 15.2 3.3 15.2 12.1 0 4.8-1.8 8.3-6.4 8.3-1.5 0-3.4-.4-5.2-2.4 2.2-1.1 4.2-4.9 4.2-8.3 0-2.9-1.5-5.6-5.6-5.6-10 0-18.9 23.9-18.9 42.4 0 8.3 2.2 14.2 10.9 14.2 7.1 0 13.5-3.4 17.7-9.1l2.2 1.1zm32.9-16.3c.4.2.7.2 1 .2 4.2 0 10.1-2.7 14-5.5l.8 2.4c-3.4 3.7-9.5 6.5-16.1 7.5-1.5 16.8-10.6 27.3-21.7 27.3-8.4 0-14.5-4-14.5-14.4 0-10.5 6.2-32.2 24.9-32.2 7.8.3 11.6 5.3 11.6 14.7zm-7.7 5c-1.9-.5-2.4-2-2.4-3.8 0-2.5 1.2-4.2 2.8-4.9-.2-3.8-1.1-5.3-3.4-5.3-6.5 0-12 16.6-12 25.6 0 6 1.2 7.3 4.6 7.3 4.2.1 8.9-8 10.4-18.9zm-6.6 39.7c0-8.3 7.1-11 15.8-13.6l10.9-51.9c2.7-13 10.6-15.5 16.5-15.5 4.1 0 8 2.2 9.7 5.7 3.6-4.6 8.4-5.7 12.4-5.7 5.6 0 10.8 3.9 10.8 9.8 0 1.5-.1 2.6-.3 3.7h-4.3c.1-.9.2-1.7.2-2.4 0-2.1-1.7-3.1-3.4-3.1-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9.1l-.8 3.6h-9l-10.3 49.1c-2.7 13-10.6 15.5-16.5 15.5-5.2 0-8.3-2.3-9.8-5.7-3.5 4.6-8.3 5.7-12.3 5.7-5.6.1-10.8-3.8-10.8-9.7zm9.1 1.8c1.9 0 4.2-1.8 5.4-7.1l1.1-5.3c-5.7 2-10.1 4.4-10.1 9.4 0 1.2 1.7 3 3.6 3zm21.7 0c1.9 0 4.2-1.8 5.4-7.1l2.2-10.4-9.4 1.8-1.8 8.3c-.5 2.1-1.1 4-1.8 5.6.9 1.3 3 1.8 5.4 1.8zm-1.4-18l9.4-1.7 7.7-36.8h-9l-8.1 38.5zm16.6-56.7c-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9l2.1-9.5c.2-.7.2-1.3.2-2 .1-2-1.5-3-3.4-3zm37.9 53c7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.5-10 18.5-20.9 19.2-.1 1.3-.2 2.5-.2 3.6 0 6.2 2.2 7.7 6.5 7.7zm5.3-34.4c-4.6 0-9.1 9.7-10.9 18.7 7-.5 13.2-7.4 13.2-15 0-2.2-.5-3.7-2.3-3.7zm28.6 33.4c3.4 0 7.8-2.3 10.8-4.8-2 10.4-8.4 13.4-15.8 13.4-8.4 0-14.1-4.2-14.1-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.6-10 18.5-20.9 19.2-.1.9-.2 2-.2 2.7 0 5.7 2.5 7.6 5.6 7.6zm6.2-33.4c-4.5 0-9.1 10.1-11 18.7 7.1-.4 13.3-7.3 13.3-15 0-2.2-.6-3.7-2.3-3.7zm51.3-6.7c-1.7 0-3-.6-4.2-1.9 2.4-1.5 4.1-4.8 4.1-7.8 0-3.1-1.8-6.1-6.8-6.1s-8.3 2.8-8.3 8.2c0 13.3 20.5 15.2 20.5 34.8 0 15.3-12.3 22.7-25.6 22.7-10.4 0-19.3-4.5-19.3-15.7 0-9.8 7-14.9 13.3-14.9 3.1 0 7.7 1.3 8 6-4.9 0-10.7 2.3-10.7 8.5 0 4.5 2.9 8.7 8.7 8.7 6.1 0 10.6-4.4 10.6-12 0-15.6-18.6-21.1-18.6-34.5 0-9.5 9.3-16.3 21-16.3 4.3 0 14.6.9 14.6 10.9.1 5.5-2.8 9.4-7.3 9.4zm36.2 10.3c0-2.3-.8-3.7-2.5-3.7-5.7 0-11.7 16.6-11.7 26.7 0 6.2 2.2 7.6 6.6 7.6 7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.6 6-32.3 24.5-32.3 8.1 0 10.1 4.2 10.1 8.3 0 4.4-2.2 6.7-4.8 6.7-1 0-2.1-.4-3.1-1.1.5-1.9.9-3.6.9-5.3zm27.7-7.6l-1.2 5.7c3.1-2.7 6.7-5.7 11-5.7 4.1 0 6.3 3.3 6.3 6.9 0 3.1-2.1 6.7-6.6 6.7-5.1 0-2.5-6-5.3-6-2.7 0-4.4 1.4-6.7 3.4l-7.2 34.6h-13.1l9.6-45.4 13.2-.2zm34.2 0l-6.6 30.9c-.3 1.2-.4 2.1-.4 2.9 0 2.5 1.2 3.3 3.7 3.3 3.5 0 6.9-3.4 8.1-8h3.8c-5.2 14.8-14.2 16.8-19.1 16.8-5.5 0-9.7-3.2-9.7-10.9 0-1.8.3-3.7.7-5.9l6.2-29.2 13.3.1zm-4.1-19.4c4 0 7.2 3.2 7.2 7.2s-3.2 7.1-7.2 7.1-7.1-3.1-7.1-7.1c-.1-4 3.2-7.2 7.1-7.2zm29.1 16l-1.5 6.9c2.6-2.3 6.1-3.9 10.7-3.9 6.2 0 11.1 3.5 11.1 14.4 0 12.2-4.7 32.1-22.3 32.1-4.5 0-6.8-1.6-7.7-3.2l-4.7 22.1-13.7 3.2 15.2-71.5 12.9-.1zm7.8 17c0-7-2.9-7.5-4.5-7.5-2 0-4.5 1.6-6.3 4.4l-5.4 25.5c.4 1 1.4 2.1 3.4 2.1 9.7 0 12.8-15.9 12.8-24.5zm27.8 17.3c-.3 1.1-.5 2.2-.5 3.1 0 1.9.7 3.2 3.1 3.2.7 0 1.7 0 2.4-.3-2.5 7.8-6.6 8.9-9.6 8.9-6.4 0-9.1-4.4-9.1-10.3 0-1.6.2-3.1.6-4.8l5.8-27.2h-3l.7-3.6h3L528 366l13.4-1.9s-1.4 6.2-3.1 14.4h5.5l-.7 3.6h-5.5l-5.7 27.4z"/>
 </svg>
 </a>
   <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-close="try" aria-label="Toggle sidebar">
@@ -524,17 +510,20 @@
   </div>
   <div class="row">
     <div class="col text-right try-buttons">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="try-coffeescript" data-run="true">▶</button>&emsp;
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="try-coffeescript" data-run="true"><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</button>&emsp;
     </div>
   </div>
 </aside>
 
 
 <div class="container-fluid" id="top">
-  <div class="row row-offcanvas row-offcanvas-left">
-    <nav class="sidebar sidebar-offcanvas col-xs-12 col-lg-3 bg-ribbed-light">
+  <div class="row flex-nowrap">
+    <nav class="sidebar col-lg-3 bg-ribbed-light">
       <nav id="contents" class="navbar contents">
-  <nav class="nav flex-column contents-column">
+  <nav class="nav flex-column">
     <a href="#try" class="nav-link d-md-none" data-action="sidebar-nav" data-toggle="try">Try CoffeeScript</a>
     <a href="#top" class="nav-link" data-action="sidebar-nav">Overview</a>
     <a href="#coffeescript-2" class="nav-link" data-action="sidebar-nav">CoffeeScript 2</a>
@@ -614,17 +603,15 @@
 
     </nav>
     <main class="main col-lg-9 ml-auto">
-
       <header class="title-logo d-none d-lg-block">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="-22 347 566 100">
-	<title>
-		CoffeeScript Logo
-	</title>
-	<path d="M21.7 351.1c.1.6-.2 1.1-1.2 1.6-1.3-.7-4.1-1.1-6.4-.9-2.5.2-4.6 1-4.3 2.7.4 1.7 2.8 2.7 7.1 2.3 10.5-.9 10.4-8 25.8-9.4 12-1.1 18.7 2.6 19.6 7.1.7 3.5-2.2 6.9-10.9 7.6-7.7.7-12.2-1.4-12.6-3.5-.2-1.1.4-2.7 4.1-3.1.4 1.7 2.5 3.5 7.5 3 3.6-.3 6.6-1.6 6.2-3.6-.4-2.1-4.2-3.3-10.2-2.8-12.2 1.1-15.2 7.8-25.6 8.7-7.4.7-13.4-2-14.2-6-.3-1.5-.3-5 7.5-5.7 4-.3 7.2.4 7.6 2zm-39 41.8c-3.4 4.3-4.9 9.3-4.6 14.2.3 4.9 2.7 8.9 6.5 12 4 3.1 8.3 4 13.2 3.1 1.9-.3 4-1.3 5.9-1.9-4 0-7.4-1.3-10.8-4-3.7-2.7-6.2-6.5-6.8-11.1-.9-4.3 0-8.3 2.4-11.8 2.7-3.4 6.2-5.3 10.8-5.9 4.6-.3 8.6.9 12.6 3.7-.9-1.3-2.2-2.2-3.4-3.4-4-2.7-8.3-4-13.6-2.7-4.8 1-8.8 3.5-12.2 7.8zm53.6-23.1c-12.9 0-24.4-1.3-32.7-3.1-8.9-2.2-13.6-4.6-13.6-7.7 0-1.3.6-2.4 2.4-3.7-5.6 2.2-8.6 4-8.6 6.8.3 3.1 5.3 6.2 15.5 8.6 9.6 2.4 21.9 3.7 36.7 3.7 15.1 0 27.1-1.3 36.7-3.7 10.2-2.4 15.1-5.6 15.1-8.6 0-2.2-2.2-4.3-6.2-5.9.9.6 1.6 1.6 1.6 2.7 0 3.1-4.6 5.6-13.9 7.7-8.6 1.9-19.6 3.2-33 3.2zm36.8 8.6c-9.6 2.2-21.9 3.7-36.7 3.7-15.1 0-27.4-1.6-37-3.7-8.6-2.2-13.2-4.6-14.8-7.1 1.6 10.8 5.3 21 10.2 30 3.7 5.6 7.4 10.5 11.1 15.8 1.6 3.1 2.7 6.2 3.4 9.3 2.4 3.4 5.9 5.6 10.2 6.8 5.3 1.9 10.8 2.7 16.4 2.4h.6c5.6.3 11.5-.6 16.9-2.4 4-1.3 7.4-3.4 9.9-6.8h.3c.6-3.1 1.6-6.2 3.1-9.3 3.7-5.3 7.4-10.2 11.1-15.8 4.9-8.9 8.3-19.1 10.2-30-2 2.8-6.6 5.2-14.9 7.1zm106.2 30.1c-4.8 12.1-17.6 16.9-25.9 16.9-13.4 0-19.9-6-19.9-22.3 0-16.5 7.9-47.3 31.7-47.3 8.5 0 15.2 3.3 15.2 12.1 0 4.8-1.8 8.3-6.4 8.3-1.5 0-3.4-.4-5.2-2.4 2.2-1.1 4.2-4.9 4.2-8.3 0-2.9-1.5-5.6-5.6-5.6-10 0-18.9 23.9-18.9 42.4 0 8.3 2.2 14.2 10.9 14.2 7.1 0 13.5-3.4 17.7-9.1l2.2 1.1zm32.9-16.3c.4.2.7.2 1 .2 4.2 0 10.1-2.7 14-5.5l.8 2.4c-3.4 3.7-9.5 6.5-16.1 7.5-1.5 16.8-10.6 27.3-21.7 27.3-8.4 0-14.5-4-14.5-14.4 0-10.5 6.2-32.2 24.9-32.2 7.8.3 11.6 5.3 11.6 14.7zm-7.7 5c-1.9-.5-2.4-2-2.4-3.8 0-2.5 1.2-4.2 2.8-4.9-.2-3.8-1.1-5.3-3.4-5.3-6.5 0-12 16.6-12 25.6 0 6 1.2 7.3 4.6 7.3 4.2.1 8.9-8 10.4-18.9zm-6.6 39.7c0-8.3 7.1-11 15.8-13.6l10.9-51.9c2.7-13 10.6-15.5 16.5-15.5 4.1 0 8 2.2 9.7 5.7 3.6-4.6 8.4-5.7 12.4-5.7 5.6 0 10.8 3.9 10.8 9.8 0 1.5-.1 2.6-.3 3.7h-4.3c.1-.9.2-1.7.2-2.4 0-2.1-1.7-3.1-3.4-3.1-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9.1l-.8 3.6h-9l-10.3 49.1c-2.7 13-10.6 15.5-16.5 15.5-5.2 0-8.3-2.3-9.8-5.7-3.5 4.6-8.3 5.7-12.3 5.7-5.6.1-10.8-3.8-10.8-9.7zm9.1 1.8c1.9 0 4.2-1.8 5.4-7.1l1.1-5.3c-5.7 2-10.1 4.4-10.1 9.4 0 1.2 1.7 3 3.6 3zm21.7 0c1.9 0 4.2-1.8 5.4-7.1l2.2-10.4-9.4 1.8-1.8 8.3c-.5 2.1-1.1 4-1.8 5.6.9 1.3 3 1.8 5.4 1.8zm-1.4-18l9.4-1.7 7.7-36.8h-9l-8.1 38.5zm16.6-56.7c-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9l2.1-9.5c.2-.7.2-1.3.2-2 .1-2-1.5-3-3.4-3zm37.9 53c7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.5-10 18.5-20.9 19.2-.1 1.3-.2 2.5-.2 3.6 0 6.2 2.2 7.7 6.5 7.7zm5.3-34.4c-4.6 0-9.1 9.7-10.9 18.7 7-.5 13.2-7.4 13.2-15 0-2.2-.5-3.7-2.3-3.7zm28.6 33.4c3.4 0 7.8-2.3 10.8-4.8-2 10.4-8.4 13.4-15.8 13.4-8.4 0-14.1-4.2-14.1-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.6-10 18.5-20.9 19.2-.1.9-.2 2-.2 2.7 0 5.7 2.5 7.6 5.6 7.6zm6.2-33.4c-4.5 0-9.1 10.1-11 18.7 7.1-.4 13.3-7.3 13.3-15 0-2.2-.6-3.7-2.3-3.7zm51.3-6.7c-1.7 0-3-.6-4.2-1.9 2.4-1.5 4.1-4.8 4.1-7.8 0-3.1-1.8-6.1-6.8-6.1s-8.3 2.8-8.3 8.2c0 13.3 20.5 15.2 20.5 34.8 0 15.3-12.3 22.7-25.6 22.7-10.4 0-19.3-4.5-19.3-15.7 0-9.8 7-14.9 13.3-14.9 3.1 0 7.7 1.3 8 6-4.9 0-10.7 2.3-10.7 8.5 0 4.5 2.9 8.7 8.7 8.7 6.1 0 10.6-4.4 10.6-12 0-15.6-18.6-21.1-18.6-34.5 0-9.5 9.3-16.3 21-16.3 4.3 0 14.6.9 14.6 10.9.1 5.5-2.8 9.4-7.3 9.4zm36.2 10.3c0-2.3-.8-3.7-2.5-3.7-5.7 0-11.7 16.6-11.7 26.7 0 6.2 2.2 7.6 6.6 7.6 7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.6 6-32.3 24.5-32.3 8.1 0 10.1 4.2 10.1 8.3 0 4.4-2.2 6.7-4.8 6.7-1 0-2.1-.4-3.1-1.1.5-1.9.9-3.6.9-5.3zm27.7-7.6l-1.2 5.7c3.1-2.7 6.7-5.7 11-5.7 4.1 0 6.3 3.3 6.3 6.9 0 3.1-2.1 6.7-6.6 6.7-5.1 0-2.5-6-5.3-6-2.7 0-4.4 1.4-6.7 3.4l-7.2 34.6h-13.1l9.6-45.4 13.2-.2zm34.2 0l-6.6 30.9c-.3 1.2-.4 2.1-.4 2.9 0 2.5 1.2 3.3 3.7 3.3 3.5 0 6.9-3.4 8.1-8h3.8c-5.2 14.8-14.2 16.8-19.1 16.8-5.5 0-9.7-3.2-9.7-10.9 0-1.8.3-3.7.7-5.9l6.2-29.2 13.3.1zm-4.1-19.4c4 0 7.2 3.2 7.2 7.2s-3.2 7.1-7.2 7.1-7.1-3.1-7.1-7.1c-.1-4 3.2-7.2 7.1-7.2zm29.1 16l-1.5 6.9c2.6-2.3 6.1-3.9 10.7-3.9 6.2 0 11.1 3.5 11.1 14.4 0 12.2-4.7 32.1-22.3 32.1-4.5 0-6.8-1.6-7.7-3.2l-4.7 22.1-13.7 3.2 15.2-71.5 12.9-.1zm7.8 17c0-7-2.9-7.5-4.5-7.5-2 0-4.5 1.6-6.3 4.4l-5.4 25.5c.4 1 1.4 2.1 3.4 2.1 9.7 0 12.8-15.9 12.8-24.5zm27.8 17.3c-.3 1.1-.5 2.2-.5 3.1 0 1.9.7 3.2 3.1 3.2.7 0 1.7 0 2.4-.3-2.5 7.8-6.6 8.9-9.6 8.9-6.4 0-9.1-4.4-9.1-10.3 0-1.6.2-3.1.6-4.8l5.8-27.2h-3l.7-3.6h3L528 366l13.4-1.9s-1.4 6.2-3.1 14.4h5.5l-.7 3.6h-5.5l-5.7 27.4z"/>
+  <title>
+    CoffeeScript Logo
+  </title>
+  <path d="M21.7 351.1c.1.6-.2 1.1-1.2 1.6-1.3-.7-4.1-1.1-6.4-.9-2.5.2-4.6 1-4.3 2.7.4 1.7 2.8 2.7 7.1 2.3 10.5-.9 10.4-8 25.8-9.4 12-1.1 18.7 2.6 19.6 7.1.7 3.5-2.2 6.9-10.9 7.6-7.7.7-12.2-1.4-12.6-3.5-.2-1.1.4-2.7 4.1-3.1.4 1.7 2.5 3.5 7.5 3 3.6-.3 6.6-1.6 6.2-3.6-.4-2.1-4.2-3.3-10.2-2.8-12.2 1.1-15.2 7.8-25.6 8.7-7.4.7-13.4-2-14.2-6-.3-1.5-.3-5 7.5-5.7 4-.3 7.2.4 7.6 2zm-39 41.8c-3.4 4.3-4.9 9.3-4.6 14.2.3 4.9 2.7 8.9 6.5 12 4 3.1 8.3 4 13.2 3.1 1.9-.3 4-1.3 5.9-1.9-4 0-7.4-1.3-10.8-4-3.7-2.7-6.2-6.5-6.8-11.1-.9-4.3 0-8.3 2.4-11.8 2.7-3.4 6.2-5.3 10.8-5.9 4.6-.3 8.6.9 12.6 3.7-.9-1.3-2.2-2.2-3.4-3.4-4-2.7-8.3-4-13.6-2.7-4.8 1-8.8 3.5-12.2 7.8zm53.6-23.1c-12.9 0-24.4-1.3-32.7-3.1-8.9-2.2-13.6-4.6-13.6-7.7 0-1.3.6-2.4 2.4-3.7-5.6 2.2-8.6 4-8.6 6.8.3 3.1 5.3 6.2 15.5 8.6 9.6 2.4 21.9 3.7 36.7 3.7 15.1 0 27.1-1.3 36.7-3.7 10.2-2.4 15.1-5.6 15.1-8.6 0-2.2-2.2-4.3-6.2-5.9.9.6 1.6 1.6 1.6 2.7 0 3.1-4.6 5.6-13.9 7.7-8.6 1.9-19.6 3.2-33 3.2zm36.8 8.6c-9.6 2.2-21.9 3.7-36.7 3.7-15.1 0-27.4-1.6-37-3.7-8.6-2.2-13.2-4.6-14.8-7.1 1.6 10.8 5.3 21 10.2 30 3.7 5.6 7.4 10.5 11.1 15.8 1.6 3.1 2.7 6.2 3.4 9.3 2.4 3.4 5.9 5.6 10.2 6.8 5.3 1.9 10.8 2.7 16.4 2.4h.6c5.6.3 11.5-.6 16.9-2.4 4-1.3 7.4-3.4 9.9-6.8h.3c.6-3.1 1.6-6.2 3.1-9.3 3.7-5.3 7.4-10.2 11.1-15.8 4.9-8.9 8.3-19.1 10.2-30-2 2.8-6.6 5.2-14.9 7.1zm106.2 30.1c-4.8 12.1-17.6 16.9-25.9 16.9-13.4 0-19.9-6-19.9-22.3 0-16.5 7.9-47.3 31.7-47.3 8.5 0 15.2 3.3 15.2 12.1 0 4.8-1.8 8.3-6.4 8.3-1.5 0-3.4-.4-5.2-2.4 2.2-1.1 4.2-4.9 4.2-8.3 0-2.9-1.5-5.6-5.6-5.6-10 0-18.9 23.9-18.9 42.4 0 8.3 2.2 14.2 10.9 14.2 7.1 0 13.5-3.4 17.7-9.1l2.2 1.1zm32.9-16.3c.4.2.7.2 1 .2 4.2 0 10.1-2.7 14-5.5l.8 2.4c-3.4 3.7-9.5 6.5-16.1 7.5-1.5 16.8-10.6 27.3-21.7 27.3-8.4 0-14.5-4-14.5-14.4 0-10.5 6.2-32.2 24.9-32.2 7.8.3 11.6 5.3 11.6 14.7zm-7.7 5c-1.9-.5-2.4-2-2.4-3.8 0-2.5 1.2-4.2 2.8-4.9-.2-3.8-1.1-5.3-3.4-5.3-6.5 0-12 16.6-12 25.6 0 6 1.2 7.3 4.6 7.3 4.2.1 8.9-8 10.4-18.9zm-6.6 39.7c0-8.3 7.1-11 15.8-13.6l10.9-51.9c2.7-13 10.6-15.5 16.5-15.5 4.1 0 8 2.2 9.7 5.7 3.6-4.6 8.4-5.7 12.4-5.7 5.6 0 10.8 3.9 10.8 9.8 0 1.5-.1 2.6-.3 3.7h-4.3c.1-.9.2-1.7.2-2.4 0-2.1-1.7-3.1-3.4-3.1-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9.1l-.8 3.6h-9l-10.3 49.1c-2.7 13-10.6 15.5-16.5 15.5-5.2 0-8.3-2.3-9.8-5.7-3.5 4.6-8.3 5.7-12.3 5.7-5.6.1-10.8-3.8-10.8-9.7zm9.1 1.8c1.9 0 4.2-1.8 5.4-7.1l1.1-5.3c-5.7 2-10.1 4.4-10.1 9.4 0 1.2 1.7 3 3.6 3zm21.7 0c1.9 0 4.2-1.8 5.4-7.1l2.2-10.4-9.4 1.8-1.8 8.3c-.5 2.1-1.1 4-1.8 5.6.9 1.3 3 1.8 5.4 1.8zm-1.4-18l9.4-1.7 7.7-36.8h-9l-8.1 38.5zm16.6-56.7c-2 0-4.8 1.1-6.2 7.1l-1.7 7.4h9l2.1-9.5c.2-.7.2-1.3.2-2 .1-2-1.5-3-3.4-3zm37.9 53c7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.5-10 18.5-20.9 19.2-.1 1.3-.2 2.5-.2 3.6 0 6.2 2.2 7.7 6.5 7.7zm5.3-34.4c-4.6 0-9.1 9.7-10.9 18.7 7-.5 13.2-7.4 13.2-15 0-2.2-.5-3.7-2.3-3.7zm28.6 33.4c3.4 0 7.8-2.3 10.8-4.8-2 10.4-8.4 13.4-15.8 13.4-8.4 0-14.1-4.2-14.1-14.5 0-10.5 5.9-32.3 24.6-32.3 8.1 0 10 4.2 10 8.7 0 10.6-10 18.5-20.9 19.2-.1.9-.2 2-.2 2.7 0 5.7 2.5 7.6 5.6 7.6zm6.2-33.4c-4.5 0-9.1 10.1-11 18.7 7.1-.4 13.3-7.3 13.3-15 0-2.2-.6-3.7-2.3-3.7zm51.3-6.7c-1.7 0-3-.6-4.2-1.9 2.4-1.5 4.1-4.8 4.1-7.8 0-3.1-1.8-6.1-6.8-6.1s-8.3 2.8-8.3 8.2c0 13.3 20.5 15.2 20.5 34.8 0 15.3-12.3 22.7-25.6 22.7-10.4 0-19.3-4.5-19.3-15.7 0-9.8 7-14.9 13.3-14.9 3.1 0 7.7 1.3 8 6-4.9 0-10.7 2.3-10.7 8.5 0 4.5 2.9 8.7 8.7 8.7 6.1 0 10.6-4.4 10.6-12 0-15.6-18.6-21.1-18.6-34.5 0-9.5 9.3-16.3 21-16.3 4.3 0 14.6.9 14.6 10.9.1 5.5-2.8 9.4-7.3 9.4zm36.2 10.3c0-2.3-.8-3.7-2.5-3.7-5.7 0-11.7 16.6-11.7 26.7 0 6.2 2.2 7.6 6.6 7.6 7.1 0 11.6-4 16.1-9.2h3.1c-5.2 8.3-12.9 16.8-25 16.8-8.5 0-14.2-4.2-14.2-14.5 0-10.6 6-32.3 24.5-32.3 8.1 0 10.1 4.2 10.1 8.3 0 4.4-2.2 6.7-4.8 6.7-1 0-2.1-.4-3.1-1.1.5-1.9.9-3.6.9-5.3zm27.7-7.6l-1.2 5.7c3.1-2.7 6.7-5.7 11-5.7 4.1 0 6.3 3.3 6.3 6.9 0 3.1-2.1 6.7-6.6 6.7-5.1 0-2.5-6-5.3-6-2.7 0-4.4 1.4-6.7 3.4l-7.2 34.6h-13.1l9.6-45.4 13.2-.2zm34.2 0l-6.6 30.9c-.3 1.2-.4 2.1-.4 2.9 0 2.5 1.2 3.3 3.7 3.3 3.5 0 6.9-3.4 8.1-8h3.8c-5.2 14.8-14.2 16.8-19.1 16.8-5.5 0-9.7-3.2-9.7-10.9 0-1.8.3-3.7.7-5.9l6.2-29.2 13.3.1zm-4.1-19.4c4 0 7.2 3.2 7.2 7.2s-3.2 7.1-7.2 7.1-7.1-3.1-7.1-7.1c-.1-4 3.2-7.2 7.1-7.2zm29.1 16l-1.5 6.9c2.6-2.3 6.1-3.9 10.7-3.9 6.2 0 11.1 3.5 11.1 14.4 0 12.2-4.7 32.1-22.3 32.1-4.5 0-6.8-1.6-7.7-3.2l-4.7 22.1-13.7 3.2 15.2-71.5 12.9-.1zm7.8 17c0-7-2.9-7.5-4.5-7.5-2 0-4.5 1.6-6.3 4.4l-5.4 25.5c.4 1 1.4 2.1 3.4 2.1 9.7 0 12.8-15.9 12.8-24.5zm27.8 17.3c-.3 1.1-.5 2.2-.5 3.1 0 1.9.7 3.2 3.1 3.2.7 0 1.7 0 2.4-.3-2.5 7.8-6.6 8.9-9.6 8.9-6.4 0-9.1-4.4-9.1-10.3 0-1.6.2-3.1.6-4.8l5.8-27.2h-3l.7-3.6h3L528 366l13.4-1.9s-1.4 6.2-3.1 14.4h5.5l-.7 3.6h-5.5l-5.7 27.4z"/>
 </svg>
 
       </header>
-
       <section id="overview">
         <p><strong>CoffeeScript is a little language that compiles into JavaScript.</strong> Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.</p>
 <p>The golden rule of CoffeeScript is: <em>“It’s just JavaScript.”</em> The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.</p>
@@ -666,6 +653,35 @@ <h2>Overview</h2>
 # Array comprehensions:
 cubes = (math.cube num for num in list)
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># Assignment:</span>
+<span class="cm-variable">number</span>   <span class="cm-punctuation">=</span> <span class="cm-number">42</span>
+<span class="cm-variable">opposite</span> <span class="cm-punctuation">=</span> <span class="cm-atom">true</span>
+
+<span class="cm-comment"># Conditions:</span>
+<span class="cm-variable">number</span> <span class="cm-punctuation">=</span> <span class="cm-number">-42</span> <span class="cm-keyword">if</span> <span class="cm-variable">opposite</span>
+
+<span class="cm-comment"># Functions:</span>
+<span class="cm-variable">square</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">x</span> <span class="cm-operator">*</span> <span class="cm-variable">x</span>
+
+<span class="cm-comment"># Arrays:</span>
+<span class="cm-variable">list</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">2</span><span class="cm-punctuation">,</span> <span class="cm-number">3</span><span class="cm-punctuation">,</span> <span class="cm-number">4</span><span class="cm-punctuation">,</span> <span class="cm-number">5</span><span class="cm-punctuation">]</span>
+
+<span class="cm-comment"># Objects:</span>
+<span class="cm-variable">math</span> <span class="cm-punctuation">=</span>
+<span class="cm-indent">  </span><span class="cm-variable">root</span><span class="cm-punctuation">:</span>   <span class="cm-variable">Math</span><span class="cm-punctuation">.</span><span class="cm-property">sqrt</span>
+  <span class="cm-variable">square</span><span class="cm-punctuation">:</span> <span class="cm-variable">square</span>
+  <span class="cm-variable">cube</span><span class="cm-punctuation">:</span>   <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">x</span> <span class="cm-operator">*</span> <span class="cm-variable">square</span> <span class="cm-variable">x</span>
+
+<span class="cm-comment"># Splats:</span>
+<span class="cm-variable">race</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">winner</span><span class="cm-punctuation">,</span> <span class="cm-variable">runners</span><span class="cm-punctuation">...)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">print</span> <span class="cm-variable">winner</span><span class="cm-punctuation">,</span> <span class="cm-variable">runners</span>
+
+<span class="cm-comment"># Existence:</span>
+<span class="cm-variable">alert</span> <span class="cm-string">"I knew it!"</span> <span class="cm-keyword">if</span> <span class="cm-variable">elvis</span><span class="cm-operator">?</span>
+
+<span class="cm-comment"># Array comprehensions:</span>
+<span class="cm-variable">cubes</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">math</span><span class="cm-punctuation">.</span><span class="cm-property">cube</span> <span class="cm-variable">num</span> <span class="cm-keyword">for</span> <span class="cm-variable">num</span> <span class="cm-operator">in</span> <span class="cm-variable">list</span><span class="cm-punctuation">)</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="overview-js">// Assignment:
@@ -718,12 +734,65 @@ <h2>Overview</h2>
   return results;
 })();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// Assignment:</span>
+<span class="cm-keyword">var</span> <span class="cm-def">cubes</span>, <span class="cm-def">list</span>, <span class="cm-def">math</span>, <span class="cm-def">num</span>, <span class="cm-def">number</span>, <span class="cm-def">opposite</span>, <span class="cm-def">race</span>, <span class="cm-def">square</span>;
+
+<span class="cm-variable">number</span> <span class="cm-operator">=</span> <span class="cm-number">42</span>;
+
+<span class="cm-variable">opposite</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">opposite</span>) {
+  <span class="cm-comment">// Conditions:</span>
+  <span class="cm-variable">number</span> <span class="cm-operator">=</span> <span class="cm-operator">-</span><span class="cm-number">42</span>;
+}
+
+<span class="cm-comment">// Functions:</span>
+<span class="cm-variable">square</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">x</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span> <span class="cm-operator">*</span> <span class="cm-variable-2">x</span>;
+};
+
+<span class="cm-comment">// Arrays:</span>
+<span class="cm-variable">list</span> <span class="cm-operator">=</span> [<span class="cm-number">1</span>, <span class="cm-number">2</span>, <span class="cm-number">3</span>, <span class="cm-number">4</span>, <span class="cm-number">5</span>];
+
+<span class="cm-comment">// Objects:</span>
+<span class="cm-variable">math</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">root</span>: <span class="cm-variable">Math</span>.<span class="cm-property">sqrt</span>,
+  <span class="cm-property">square</span>: <span class="cm-variable">square</span>,
+  <span class="cm-property">cube</span>: <span class="cm-keyword">function</span>(<span class="cm-def">x</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span> <span class="cm-operator">*</span> <span class="cm-variable">square</span>(<span class="cm-variable-2">x</span>);
+  }
+};
+
+<span class="cm-comment">// Splats:</span>
+<span class="cm-variable">race</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">winner</span>, <span class="cm-meta">...</span><span class="cm-def">runners</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable">print</span>(<span class="cm-variable-2">winner</span>, <span class="cm-variable-2">runners</span>);
+};
+
+<span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable">elvis</span> <span class="cm-operator">!==</span> <span class="cm-string">"undefined"</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">elvis</span> <span class="cm-operator">!==</span> <span class="cm-atom">null</span>) {
+  <span class="cm-comment">// Existence:</span>
+  <span class="cm-variable">alert</span>(<span class="cm-string">"I knew it!"</span>);
+}
+
+<span class="cm-comment">// Array comprehensions:</span>
+<span class="cm-variable">cubes</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">i</span>, <span class="cm-def">len</span>, <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [];
+  <span class="cm-keyword">for</span> (<span class="cm-variable-2">i</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable-2">len</span> <span class="cm-operator">=</span> <span class="cm-variable">list</span>.<span class="cm-property">length</span>; <span class="cm-variable-2">i</span> <span class="cm-operator">&lt;</span> <span class="cm-variable-2">len</span>; <span class="cm-variable-2">i</span><span class="cm-operator">++</span>) {
+    <span class="cm-variable">num</span> <span class="cm-operator">=</span> <span class="cm-variable">list</span>[<span class="cm-variable-2">i</span>];
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-variable">math</span>.<span class="cm-property">cube</span>(<span class="cm-variable">num</span>));
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+})();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="overview" data-run="cubes"><small>▶</small>&ensp;cubes</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="overview" data-run="cubes"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>cubes</button>
     </div>
   </div>
   
@@ -904,6 +973,9 @@ <h2>Functions</h2>
       <textarea class="coffeescript-input" id="functions-coffee">square = (x) -> x * x
 cube   = (x) -> square(x) * x
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">square</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">x</span> <span class="cm-operator">*</span> <span class="cm-variable">x</span>
+<span class="cm-variable">cube</span>   <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">square</span><span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">*</span> <span class="cm-variable">x</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="functions-js">var cube, square;
@@ -916,12 +988,25 @@ <h2>Functions</h2>
   return square(x) * x;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">cube</span>, <span class="cm-def">square</span>;
+
+<span class="cm-variable">square</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">x</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span> <span class="cm-operator">*</span> <span class="cm-variable-2">x</span>;
+};
+
+<span class="cm-variable">cube</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">x</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable">square</span>(<span class="cm-variable-2">x</span>) <span class="cm-operator">*</span> <span class="cm-variable-2">x</span>;
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="functions" data-run="cube%285%29"><small>▶</small>&ensp;cube(5)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="functions" data-run="cube%285%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>cube(5)</button>
     </div>
   </div>
   
@@ -933,6 +1018,9 @@ <h2>Functions</h2>
       <textarea class="coffeescript-input" id="default_args-coffee">fill = (container, liquid = "coffee") ->
   "Filling the #{container} with #{liquid}..."
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">fill</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">container</span><span class="cm-punctuation">,</span> <span class="cm-variable">liquid</span> <span class="cm-punctuation">=</span> <span class="cm-string">"coffee"</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-string">"Filling the #{container} with #{liquid}..."</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="default_args-js">var fill;
@@ -941,12 +1029,21 @@ <h2>Functions</h2>
   return `Filling the ${container} with ${liquid}...`;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">fill</span>;
+
+<span class="cm-variable">fill</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">container</span>, <span class="cm-def">liquid</span> <span class="cm-operator">=</span> <span class="cm-string">"coffee"</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-string-2">`Filling the ${</span><span class="cm-variable-2">container</span><span class="cm-string-2">}</span> <span class="cm-string-2">with ${</span><span class="cm-variable-2">liquid</span><span class="cm-string-2">}...`</span>;
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="default_args" data-run="fill%28%22cup%22%29"><small>▶</small>&ensp;fill(&quot;cup&quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="default_args" data-run="fill%28%22cup%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>fill(&quot;cup&quot;)</button>
     </div>
   </div>
   
@@ -964,6 +1061,11 @@ <h2>Strings</h2>
 
 sentence = "#{ 22 / 7 } is a decent approximation of π"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">author</span> <span class="cm-punctuation">=</span> <span class="cm-string">"Wittgenstein"</span>
+<span class="cm-variable">quote</span>  <span class="cm-punctuation">=</span> <span class="cm-string">"A picture is a fact. -- #{ author }"</span>
+
+<span class="cm-variable">sentence</span> <span class="cm-punctuation">=</span> <span class="cm-string">"#{ 22 / 7 } is a decent approximation of π"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="interpolation-js">var author, quote, sentence;
@@ -974,12 +1076,23 @@ <h2>Strings</h2>
 
 sentence = `${22 / 7} is a decent approximation of π`;
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">author</span>, <span class="cm-def">quote</span>, <span class="cm-def">sentence</span>;
+
+<span class="cm-variable">author</span> <span class="cm-operator">=</span> <span class="cm-string">"Wittgenstein"</span>;
+
+<span class="cm-variable">quote</span> <span class="cm-operator">=</span> <span class="cm-string-2">`A picture is a fact. -- ${</span><span class="cm-variable">author</span><span class="cm-string-2">}`</span>;
+
+<span class="cm-variable">sentence</span> <span class="cm-operator">=</span> <span class="cm-string-2">`${</span><span class="cm-number">22</span> <span class="cm-operator">/</span> <span class="cm-number">7</span><span class="cm-string-2">}</span> <span class="cm-string-2">is a decent approximation of π`</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="interpolation" data-run="sentence"><small>▶</small>&ensp;sentence</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="interpolation" data-run="sentence"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>sentence</button>
     </div>
   </div>
   
@@ -995,18 +1108,32 @@ <h2>Strings</h2>
   about a little and see the watery part of the
   world..."
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">mobyDick</span> <span class="cm-punctuation">=</span> <span class="cm-string">"Call me Ishmael. Some years ago --</span>
+<span class="cm-string">  never mind how long precisely -- having little</span>
+<span class="cm-string">  or no money in my purse, and nothing particular</span>
+<span class="cm-string">  to interest me on shore, I thought I would sail</span>
+<span class="cm-string">  about a little and see the watery part of the</span>
+<span class="cm-string">  world..."</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="strings-js">var mobyDick;
 
 mobyDick = "Call me Ishmael. Some years ago -- never mind how long precisely -- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world...";
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">mobyDick</span>;
+
+<span class="cm-variable">mobyDick</span> <span class="cm-operator">=</span> <span class="cm-string">"Call me Ishmael. Some years ago -- never mind how long precisely -- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world..."</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="strings" data-run="mobyDick"><small>▶</small>&ensp;mobyDick</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="strings" data-run="mobyDick"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>mobyDick</button>
     </div>
   </div>
   
@@ -1021,18 +1148,31 @@ <h2>Strings</h2>
        </strong>
        """
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">html</span> <span class="cm-punctuation">=</span> <span class="cm-string">"""</span>
+<span class="cm-string">       &lt;strong></span>
+<span class="cm-string">         cup of coffeescript</span>
+<span class="cm-string">       &lt;/strong></span>
+<span class="cm-string">       """</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="heredocs-js">var html;
 
 html = "<strong>\n  cup of coffeescript\n</strong>";
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">html</span>;
+
+<span class="cm-variable">html</span> <span class="cm-operator">=</span> <span class="cm-string">"&lt;strong>\n  cup of coffeescript\n&lt;/strong>"</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="heredocs" data-run="html"><small>▶</small>&ensp;html</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="heredocs" data-run="html"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>html</button>
     </div>
   </div>
   
@@ -1064,6 +1204,24 @@ <h2>Objects and Arrays</h2>
     name: "Ida"
     age:  9
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">song</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">"do"</span><span class="cm-punctuation">,</span> <span class="cm-string">"re"</span><span class="cm-punctuation">,</span> <span class="cm-string">"mi"</span><span class="cm-punctuation">,</span> <span class="cm-string">"fa"</span><span class="cm-punctuation">,</span> <span class="cm-string">"so"</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">singers</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">{</span><span class="cm-variable">Jagger</span><span class="cm-punctuation">:</span> <span class="cm-string">"Rock"</span><span class="cm-punctuation">,</span> <span class="cm-variable">Elvis</span><span class="cm-punctuation">:</span> <span class="cm-string">"Roll"</span><span class="cm-punctuation">}</span>
+
+<span class="cm-variable">bitlist</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span>
+  <span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">0</span><span class="cm-punctuation">,</span> <span class="cm-number">1</span>
+  <span class="cm-number">0</span><span class="cm-punctuation">,</span> <span class="cm-number">0</span><span class="cm-punctuation">,</span> <span class="cm-number">1</span>
+  <span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">0</span>
+<span class="cm-punctuation">]</span>
+
+<span class="cm-variable">kids</span> <span class="cm-punctuation">=</span>
+<span class="cm-indent">  </span><span class="cm-variable">brother</span><span class="cm-punctuation">:</span>
+<span class="cm-indent">    </span><span class="cm-variable">name</span><span class="cm-punctuation">:</span> <span class="cm-string">"Max"</span>
+    <span class="cm-variable">age</span><span class="cm-punctuation">:</span>  <span class="cm-number">11</span>
+<span class="cm-dedent">  </span><span class="cm-variable">sister</span><span class="cm-punctuation">:</span>
+<span class="cm-indent">    </span><span class="cm-variable">name</span><span class="cm-punctuation">:</span> <span class="cm-string">"Ida"</span>
+    <span class="cm-variable">age</span><span class="cm-punctuation">:</span>  <span class="cm-number">9</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="objects_and_arrays-js">var bitlist, kids, singers, song;
@@ -1088,12 +1246,37 @@ <h2>Objects and Arrays</h2>
   }
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">bitlist</span>, <span class="cm-def">kids</span>, <span class="cm-def">singers</span>, <span class="cm-def">song</span>;
+
+<span class="cm-variable">song</span> <span class="cm-operator">=</span> [<span class="cm-string">"do"</span>, <span class="cm-string">"re"</span>, <span class="cm-string">"mi"</span>, <span class="cm-string">"fa"</span>, <span class="cm-string">"so"</span>];
+
+<span class="cm-variable">singers</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">Jagger</span>: <span class="cm-string">"Rock"</span>,
+  <span class="cm-property">Elvis</span>: <span class="cm-string">"Roll"</span>
+};
+
+<span class="cm-variable">bitlist</span> <span class="cm-operator">=</span> [<span class="cm-number">1</span>, <span class="cm-number">0</span>, <span class="cm-number">1</span>, <span class="cm-number">0</span>, <span class="cm-number">0</span>, <span class="cm-number">1</span>, <span class="cm-number">1</span>, <span class="cm-number">1</span>, <span class="cm-number">0</span>];
+
+<span class="cm-variable">kids</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">brother</span>: {
+    <span class="cm-property">name</span>: <span class="cm-string">"Max"</span>,
+    <span class="cm-property">age</span>: <span class="cm-number">11</span>
+  },
+  <span class="cm-property">sister</span>: {
+    <span class="cm-property">name</span>: <span class="cm-string">"Ida"</span>,
+    <span class="cm-property">age</span>: <span class="cm-number">9</span>
+  }
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="objects_and_arrays" data-run="song.join%28%22%20%u2026%20%22%29"><small>▶</small>&ensp;song.join(&quot; … &quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="objects_and_arrays" data-run="song.join%28%22%20%u2026%20%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>song.join(&quot; … &quot;)</button>
     </div>
   </div>
   
@@ -1106,6 +1289,10 @@ <h2>Objects and Arrays</h2>
 
 log object.class
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">$</span><span class="cm-punctuation">(</span><span class="cm-string">'.account'</span><span class="cm-punctuation">).</span><span class="cm-property">prop</span> <span class="cm-keyword">class</span><span class="cm-punctuation">:</span> <span class="cm-string">'active'</span>
+
+<span class="cm-variable">log</span> <span class="cm-variable">object</span><span class="cm-punctuation">.</span><span class="cm-property">class</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="objects_reserved-js">$('.account').prop({
@@ -1114,6 +1301,12 @@ <h2>Objects and Arrays</h2>
 
 log(object.class);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">$</span>(<span class="cm-string">'.account'</span>).<span class="cm-property">prop</span>({
+  <span class="cm-property">class</span>: <span class="cm-string">'active'</span>
+});
+
+<span class="cm-variable">log</span>(<span class="cm-variable">object</span>.<span class="cm-property">class</span>);
+</pre>
     </div>
   </div>
   
@@ -1128,6 +1321,12 @@ <h2>Objects and Arrays</h2>
 turtle = {name, mask, weapon}
 output = "#{turtle.name} wears an #{turtle.mask} mask. Watch out for his #{turtle.weapon}!"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">name</span> <span class="cm-punctuation">=</span> <span class="cm-string">"Michelangelo"</span>
+<span class="cm-variable">mask</span> <span class="cm-punctuation">=</span> <span class="cm-string">"orange"</span>
+<span class="cm-variable">weapon</span> <span class="cm-punctuation">=</span> <span class="cm-string">"nunchuks"</span>
+<span class="cm-variable">turtle</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">{</span><span class="cm-variable">name</span><span class="cm-punctuation">,</span> <span class="cm-variable">mask</span><span class="cm-punctuation">,</span> <span class="cm-variable">weapon</span><span class="cm-punctuation">}</span>
+<span class="cm-variable">output</span> <span class="cm-punctuation">=</span> <span class="cm-string">"#{turtle.name} wears an #{turtle.mask} mask. Watch out for his #{turtle.weapon}!"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="objects_shorthand-js">var mask, name, output, turtle, weapon;
@@ -1142,6 +1341,18 @@ <h2>Objects and Arrays</h2>
 
 output = `${turtle.name} wears an ${turtle.mask} mask. Watch out for his ${turtle.weapon}!`;
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">mask</span>, <span class="cm-def">name</span>, <span class="cm-def">output</span>, <span class="cm-def">turtle</span>, <span class="cm-def">weapon</span>;
+
+<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-string">"Michelangelo"</span>;
+
+<span class="cm-variable">mask</span> <span class="cm-operator">=</span> <span class="cm-string">"orange"</span>;
+
+<span class="cm-variable">weapon</span> <span class="cm-operator">=</span> <span class="cm-string">"nunchuks"</span>;
+
+<span class="cm-variable">turtle</span> <span class="cm-operator">=</span> {<span class="cm-property">name</span>, <span class="cm-property">mask</span>, <span class="cm-property">weapon</span>};
+
+<span class="cm-variable">output</span> <span class="cm-operator">=</span> <span class="cm-string-2">`${</span><span class="cm-variable">turtle</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">wears an ${</span><span class="cm-variable">turtle</span>.<span class="cm-property">mask</span><span class="cm-string-2">}</span> <span class="cm-string-2">mask. Watch out for his ${</span><span class="cm-variable">turtle</span>.<span class="cm-property">weapon</span><span class="cm-string-2">}!`</span>;
+</pre>
     </div>
   </div>
   
@@ -1160,8 +1371,16 @@ <h2>Comments</h2>
 ###
 
 sayFortune = (fortune) ->
-	console.log fortune # in bed!
+  console.log fortune # in bed!
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">###</span>
+<span class="cm-comment">Fortune Cookie Reader v1.0</span>
+<span class="cm-comment">Released under the MIT License</span>
+<span class="cm-comment">###</span>
+
+<span class="cm-variable">sayFortune</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">fortune</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">console</span><span class="cm-punctuation">.</span><span class="cm-property">log</span> <span class="cm-variable">fortune</span> <span class="cm-comment"># in bed!</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="comment-js">/*
@@ -1174,6 +1393,16 @@ <h2>Comments</h2>
   return console.log(fortune); // in bed!
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">/*</span>
+<span class="cm-comment">Fortune Cookie Reader v1.0</span>
+<span class="cm-comment">Released under the MIT License</span>
+<span class="cm-comment">*/</span>
+<span class="cm-keyword">var</span> <span class="cm-def">sayFortune</span>;
+
+<span class="cm-variable">sayFortune</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">fortune</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">fortune</span>); <span class="cm-comment">// in bed!</span>
+};
+</pre>
     </div>
   </div>
   
@@ -1193,6 +1422,12 @@ <h2>Lexical Scoping and Variable Safety</h2>
   outer = 10
 inner = changeNumbers()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">outer</span> <span class="cm-punctuation">=</span> <span class="cm-number">1</span>
+<span class="cm-variable">changeNumbers</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">inner</span> <span class="cm-punctuation">=</span> <span class="cm-number">-1</span>
+  <span class="cm-variable">outer</span> <span class="cm-punctuation">=</span> <span class="cm-number">10</span>
+<span class="cm-variable">inner</span> <span class="cm-punctuation">=</span> <span class="cm-variable">changeNumbers</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="scope-js">var changeNumbers, inner, outer;
@@ -1207,12 +1442,27 @@ <h2>Lexical Scoping and Variable Safety</h2>
 
 inner = changeNumbers();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">changeNumbers</span>, <span class="cm-def">inner</span>, <span class="cm-def">outer</span>;
+
+<span class="cm-variable">outer</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;
+
+<span class="cm-variable">changeNumbers</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">inner</span>;
+  <span class="cm-variable-2">inner</span> <span class="cm-operator">=</span> <span class="cm-operator">-</span><span class="cm-number">1</span>;
+  <span class="cm-keyword">return</span> <span class="cm-variable">outer</span> <span class="cm-operator">=</span> <span class="cm-number">10</span>;
+};
+
+<span class="cm-variable">inner</span> <span class="cm-operator">=</span> <span class="cm-variable">changeNumbers</span>();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="scope" data-run="inner"><small>▶</small>&ensp;inner</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="scope" data-run="inner"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>inner</button>
     </div>
   </div>
   
@@ -1241,6 +1491,16 @@ <h2>If, Else, Unless, and Conditional Assignment</h2>
 
 date = if friday then sue else jill
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">mood</span> <span class="cm-punctuation">=</span> <span class="cm-variable">greatlyImproved</span> <span class="cm-keyword">if</span> <span class="cm-variable">singing</span>
+
+<span class="cm-keyword">if</span> <span class="cm-variable">happy</span> <span class="cm-operator">and</span> <span class="cm-variable">knowsIt</span>
+  <span class="cm-variable">clapsHands</span><span class="cm-punctuation">()</span>
+  <span class="cm-variable">chaChaCha</span><span class="cm-punctuation">()</span>
+<span class="cm-keyword">else</span>
+  <span class="cm-variable">showIt</span><span class="cm-punctuation">()</span>
+
+<span class="cm-variable">date</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">if</span> <span class="cm-variable">friday</span> <span class="cm-keyword">then</span> <span class="cm-variable">sue</span> <span class="cm-keyword">else</span> <span class="cm-variable">jill</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="conditionals-js">var date, mood;
@@ -1258,6 +1518,21 @@ <h2>If, Else, Unless, and Conditional Assignment</h2>
 
 date = friday ? sue : jill;
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">date</span>, <span class="cm-def">mood</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">singing</span>) {
+  <span class="cm-variable">mood</span> <span class="cm-operator">=</span> <span class="cm-variable">greatlyImproved</span>;
+}
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">happy</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">knowsIt</span>) {
+  <span class="cm-variable">clapsHands</span>();
+  <span class="cm-variable">chaChaCha</span>();
+} <span class="cm-keyword">else</span> {
+  <span class="cm-variable">showIt</span>();
+}
+
+<span class="cm-variable">date</span> <span class="cm-operator">=</span> <span class="cm-variable">friday</span> <span class="cm-operator">?</span> <span class="cm-variable">sue</span> : <span class="cm-variable">jill</span>;
+</pre>
     </div>
   </div>
   
@@ -1298,6 +1573,34 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
 The Field: #{rest.join ', '}
 """
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">gold</span> <span class="cm-punctuation">=</span> <span class="cm-variable">silver</span> <span class="cm-punctuation">=</span> <span class="cm-variable">rest</span> <span class="cm-punctuation">=</span> <span class="cm-string">"unknown"</span>
+
+<span class="cm-variable">awardMedals</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">first</span><span class="cm-punctuation">,</span> <span class="cm-variable">second</span><span class="cm-punctuation">,</span> <span class="cm-variable">others</span><span class="cm-punctuation">...)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">gold</span>   <span class="cm-punctuation">=</span> <span class="cm-variable">first</span>
+  <span class="cm-variable">silver</span> <span class="cm-punctuation">=</span> <span class="cm-variable">second</span>
+  <span class="cm-variable">rest</span>   <span class="cm-punctuation">=</span> <span class="cm-variable">others</span>
+
+<span class="cm-variable">contenders</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span>
+  <span class="cm-string">"Michael Phelps"</span>
+  <span class="cm-string">"Liu Xiang"</span>
+  <span class="cm-string">"Yao Ming"</span>
+  <span class="cm-string">"Allyson Felix"</span>
+  <span class="cm-string">"Shawn Johnson"</span>
+  <span class="cm-string">"Roman Sebrle"</span>
+  <span class="cm-string">"Guo Jingjing"</span>
+  <span class="cm-string">"Tyson Gay"</span>
+  <span class="cm-string">"Asafa Powell"</span>
+  <span class="cm-string">"Usain Bolt"</span>
+<span class="cm-punctuation">]</span>
+
+<span class="cm-variable">awardMedals</span> <span class="cm-variable">contenders</span><span class="cm-punctuation">...</span>
+
+<span class="cm-variable">alert</span> <span class="cm-string">"""</span>
+<span class="cm-string">Gold: #{gold}</span>
+<span class="cm-string">Silver: #{silver}</span>
+<span class="cm-string">The Field: #{rest.join ', '}</span>
+<span class="cm-string">"""</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="splats-js">var awardMedals, contenders, gold, rest, silver;
@@ -1316,12 +1619,28 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
 
 alert(`Gold: ${gold}\nSilver: ${silver}\nThe Field: ${rest.join(', ')}`);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">awardMedals</span>, <span class="cm-def">contenders</span>, <span class="cm-def">gold</span>, <span class="cm-def">rest</span>, <span class="cm-def">silver</span>;
+
+<span class="cm-variable">gold</span> <span class="cm-operator">=</span> <span class="cm-variable">silver</span> <span class="cm-operator">=</span> <span class="cm-variable">rest</span> <span class="cm-operator">=</span> <span class="cm-string">"unknown"</span>;
+
+<span class="cm-variable">awardMedals</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">first</span>, <span class="cm-def">second</span>, <span class="cm-meta">...</span><span class="cm-def">others</span>) {
+  <span class="cm-variable">gold</span> <span class="cm-operator">=</span> <span class="cm-variable-2">first</span>;
+  <span class="cm-variable">silver</span> <span class="cm-operator">=</span> <span class="cm-variable-2">second</span>;
+  <span class="cm-keyword">return</span> <span class="cm-variable">rest</span> <span class="cm-operator">=</span> <span class="cm-variable-2">others</span>;
+};
+
+<span class="cm-variable">contenders</span> <span class="cm-operator">=</span> [<span class="cm-string">"Michael Phelps"</span>, <span class="cm-string">"Liu Xiang"</span>, <span class="cm-string">"Yao Ming"</span>, <span class="cm-string">"Allyson Felix"</span>, <span class="cm-string">"Shawn Johnson"</span>, <span class="cm-string">"Roman Sebrle"</span>, <span class="cm-string">"Guo Jingjing"</span>, <span class="cm-string">"Tyson Gay"</span>, <span class="cm-string">"Asafa Powell"</span>, <span class="cm-string">"Usain Bolt"</span>];
+
+<span class="cm-variable">awardMedals</span>(<span class="cm-meta">...</span><span class="cm-variable">contenders</span>);
+
+<span class="cm-variable">alert</span>(<span class="cm-string-2">`Gold: ${</span><span class="cm-variable">gold</span><span class="cm-string-2">}\nSilver: ${</span><span class="cm-variable">silver</span><span class="cm-string-2">}\nThe Field: ${</span><span class="cm-variable">rest</span>.<span class="cm-property">join</span>(<span class="cm-string">', '</span>)<span class="cm-string-2">}`</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="splats" data-run="true">▶</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="splats" data-run="true"></button>
     </div>
   </div>
   
@@ -1336,6 +1655,11 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
 
 all = [popular..., unwanted..., 'mushrooms']
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">popular</span>  <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">'pepperoni'</span><span class="cm-punctuation">,</span> <span class="cm-string">'sausage'</span><span class="cm-punctuation">,</span> <span class="cm-string">'cheese'</span><span class="cm-punctuation">]</span>
+<span class="cm-variable">unwanted</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">'anchovies'</span><span class="cm-punctuation">,</span> <span class="cm-string">'olives'</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">all</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-variable">popular</span><span class="cm-punctuation">...,</span> <span class="cm-variable">unwanted</span><span class="cm-punctuation">...,</span> <span class="cm-string">'mushrooms'</span><span class="cm-punctuation">]</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="array_spread-js">var all, popular, unwanted;
@@ -1346,12 +1670,23 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
 
 all = [...popular, ...unwanted, 'mushrooms'];
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">all</span>, <span class="cm-def">popular</span>, <span class="cm-def">unwanted</span>;
+
+<span class="cm-variable">popular</span> <span class="cm-operator">=</span> [<span class="cm-string">'pepperoni'</span>, <span class="cm-string">'sausage'</span>, <span class="cm-string">'cheese'</span>];
+
+<span class="cm-variable">unwanted</span> <span class="cm-operator">=</span> [<span class="cm-string">'anchovies'</span>, <span class="cm-string">'olives'</span>];
+
+<span class="cm-variable">all</span> <span class="cm-operator">=</span> [<span class="cm-meta">...</span><span class="cm-variable">popular</span>, <span class="cm-meta">...</span><span class="cm-variable">unwanted</span>, <span class="cm-string">'mushrooms'</span>];
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="array_spread" data-run="all"><small>▶</small>&ensp;all</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="array_spread" data-run="all"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>all</button>
     </div>
   </div>
   
@@ -1367,6 +1702,12 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
 
 currentUser = { user..., status: 'Uncertain' }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">user</span> <span class="cm-punctuation">=</span>
+<span class="cm-indent">  </span><span class="cm-variable">name</span><span class="cm-punctuation">:</span> <span class="cm-string">'Werner Heisenberg'</span>
+  <span class="cm-variable">occupation</span><span class="cm-punctuation">:</span> <span class="cm-string">'theoretical physicist'</span>
+
+<span class="cm-variable">currentUser</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">{</span> <span class="cm-variable">user</span><span class="cm-punctuation">...,</span> <span class="cm-variable">status</span><span class="cm-punctuation">:</span> <span class="cm-string">'Uncertain'</span> <span class="cm-punctuation">}</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="object_spread-js">var currentUser, user,
@@ -1381,12 +1722,27 @@ <h2>Splats, or Rest Parameters/Spread Syntax</h2>
   status: 'Uncertain'
 });
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">currentUser</span>, <span class="cm-def">user</span>,
+  <span class="cm-def">_extends</span> <span class="cm-operator">=</span> <span class="cm-variable">Object</span>.<span class="cm-property">assign</span> <span class="cm-operator">||</span> <span class="cm-keyword">function</span> (<span class="cm-def">target</span>) { <span class="cm-keyword">for</span> (<span class="cm-keyword">var</span> <span class="cm-def">i</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>; <span class="cm-variable-2">i</span> <span class="cm-operator">&lt;</span> <span class="cm-variable-2">arguments</span>.<span class="cm-property">length</span>; <span class="cm-variable-2">i</span><span class="cm-operator">++</span>) { <span class="cm-keyword">var</span> <span class="cm-def">source</span> <span class="cm-operator">=</span> <span class="cm-variable-2">arguments</span>[<span class="cm-variable-2">i</span>]; <span class="cm-keyword">for</span> (<span class="cm-keyword">var</span> <span class="cm-def">key</span> <span class="cm-keyword">in</span> <span class="cm-variable-2">source</span>) { <span class="cm-keyword">if</span> (<span class="cm-variable">Object</span>.<span class="cm-property">prototype</span>.<span class="cm-property">hasOwnProperty</span>.<span class="cm-property">call</span>(<span class="cm-variable-2">source</span>, <span class="cm-variable-2">key</span>)) { <span class="cm-variable-2">target</span>[<span class="cm-variable-2">key</span>] <span class="cm-operator">=</span> <span class="cm-variable-2">source</span>[<span class="cm-variable-2">key</span>]; } } } <span class="cm-keyword">return</span> <span class="cm-variable-2">target</span>; };
+
+<span class="cm-variable">user</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">name</span>: <span class="cm-string">'Werner Heisenberg'</span>,
+  <span class="cm-property">occupation</span>: <span class="cm-string">'theoretical physicist'</span>
+};
+
+<span class="cm-variable">currentUser</span> <span class="cm-operator">=</span> <span class="cm-variable">_extends</span>({}, <span class="cm-variable">user</span>, {
+  <span class="cm-property">status</span>: <span class="cm-string">'Uncertain'</span>
+});
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_spread" data-run="JSON.stringify%28currentUser%29"><small>▶</small>&ensp;JSON.stringify(currentUser)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_spread" data-run="JSON.stringify%28currentUser%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>JSON.stringify(currentUser)</button>
     </div>
   </div>
   
@@ -1413,6 +1769,19 @@ <h2>Loops and Comprehensions</h2>
 foods = ['broccoli', 'spinach', 'chocolate']
 eat food for food in foods when food isnt 'chocolate'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># Eat lunch.</span>
+<span class="cm-variable">eat</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">food</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-string">"#{food} eaten."</span>
+<span class="cm-variable">eat</span> <span class="cm-variable">food</span> <span class="cm-keyword">for</span> <span class="cm-variable">food</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-string">'toast'</span><span class="cm-punctuation">,</span> <span class="cm-string">'cheese'</span><span class="cm-punctuation">,</span> <span class="cm-string">'wine'</span><span class="cm-punctuation">]</span>
+
+<span class="cm-comment"># Fine five course dining.</span>
+<span class="cm-variable">courses</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">'greens'</span><span class="cm-punctuation">,</span> <span class="cm-string">'caviar'</span><span class="cm-punctuation">,</span> <span class="cm-string">'truffles'</span><span class="cm-punctuation">,</span> <span class="cm-string">'roast'</span><span class="cm-punctuation">,</span> <span class="cm-string">'cake'</span><span class="cm-punctuation">]</span>
+<span class="cm-variable">menu</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">i</span><span class="cm-punctuation">,</span> <span class="cm-variable">dish</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-string">"Menu Item #{i}: #{dish}"</span> 
+<span class="cm-variable">menu</span> <span class="cm-variable">i</span> <span class="cm-operator">+</span> <span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-variable">dish</span> <span class="cm-keyword">for</span> <span class="cm-variable">dish</span><span class="cm-punctuation">,</span> <span class="cm-variable">i</span> <span class="cm-operator">in</span> <span class="cm-variable">courses</span>
+
+<span class="cm-comment"># Health conscious meal.</span>
+<span class="cm-variable">foods</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">'broccoli'</span><span class="cm-punctuation">,</span> <span class="cm-string">'spinach'</span><span class="cm-punctuation">,</span> <span class="cm-string">'chocolate'</span><span class="cm-punctuation">]</span>
+<span class="cm-variable">eat</span> <span class="cm-variable">food</span> <span class="cm-keyword">for</span> <span class="cm-variable">food</span> <span class="cm-operator">in</span> <span class="cm-variable">foods</span> <span class="cm-keyword">when</span> <span class="cm-variable">food</span> <span class="cm-operator">isnt</span> <span class="cm-string">'chocolate'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="array_comprehensions-js">// Eat lunch.
@@ -1450,6 +1819,41 @@ <h2>Loops and Comprehensions</h2>
   }
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// Eat lunch.</span>
+<span class="cm-keyword">var</span> <span class="cm-def">courses</span>, <span class="cm-def">dish</span>, <span class="cm-def">eat</span>, <span class="cm-def">food</span>, <span class="cm-def">foods</span>, <span class="cm-def">i</span>, <span class="cm-def">j</span>, <span class="cm-def">k</span>, <span class="cm-def">l</span>, <span class="cm-def">len</span>, <span class="cm-def">len1</span>, <span class="cm-def">len2</span>, <span class="cm-def">menu</span>, <span class="cm-def">ref</span>;
+
+<span class="cm-variable">eat</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">food</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-string-2">`${</span><span class="cm-variable-2">food</span><span class="cm-string-2">}</span> <span class="cm-string-2">eaten.`</span>;
+};
+
+<span class="cm-variable">ref</span> <span class="cm-operator">=</span> [<span class="cm-string">'toast'</span>, <span class="cm-string">'cheese'</span>, <span class="cm-string">'wine'</span>];
+<span class="cm-keyword">for</span> (<span class="cm-variable">j</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable">len</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>.<span class="cm-property">length</span>; <span class="cm-variable">j</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">len</span>; <span class="cm-variable">j</span><span class="cm-operator">++</span>) {
+  <span class="cm-variable">food</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>[<span class="cm-variable">j</span>];
+  <span class="cm-variable">eat</span>(<span class="cm-variable">food</span>);
+}
+
+<span class="cm-comment">// Fine five course dining.</span>
+<span class="cm-variable">courses</span> <span class="cm-operator">=</span> [<span class="cm-string">'greens'</span>, <span class="cm-string">'caviar'</span>, <span class="cm-string">'truffles'</span>, <span class="cm-string">'roast'</span>, <span class="cm-string">'cake'</span>];
+
+<span class="cm-variable">menu</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">i</span>, <span class="cm-def">dish</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-string-2">`Menu Item ${</span><span class="cm-variable-2">i</span><span class="cm-string-2">}: ${</span><span class="cm-variable-2">dish</span><span class="cm-string-2">}`</span>;
+};
+
+<span class="cm-keyword">for</span> (<span class="cm-variable">i</span> <span class="cm-operator">=</span> <span class="cm-variable">k</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable">len1</span> <span class="cm-operator">=</span> <span class="cm-variable">courses</span>.<span class="cm-property">length</span>; <span class="cm-variable">k</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">len1</span>; <span class="cm-variable">i</span> <span class="cm-operator">=</span> <span class="cm-operator">++</span><span class="cm-variable">k</span>) {
+  <span class="cm-variable">dish</span> <span class="cm-operator">=</span> <span class="cm-variable">courses</span>[<span class="cm-variable">i</span>];
+  <span class="cm-variable">menu</span>(<span class="cm-variable">i</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>, <span class="cm-variable">dish</span>);
+}
+
+<span class="cm-comment">// Health conscious meal.</span>
+<span class="cm-variable">foods</span> <span class="cm-operator">=</span> [<span class="cm-string">'broccoli'</span>, <span class="cm-string">'spinach'</span>, <span class="cm-string">'chocolate'</span>];
+
+<span class="cm-keyword">for</span> (<span class="cm-variable">l</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable">len2</span> <span class="cm-operator">=</span> <span class="cm-variable">foods</span>.<span class="cm-property">length</span>; <span class="cm-variable">l</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">len2</span>; <span class="cm-variable">l</span><span class="cm-operator">++</span>) {
+  <span class="cm-variable">food</span> <span class="cm-operator">=</span> <span class="cm-variable">foods</span>[<span class="cm-variable">l</span>];
+  <span class="cm-keyword">if</span> (<span class="cm-variable">food</span> <span class="cm-operator">!==</span> <span class="cm-string">'chocolate'</span>) {
+    <span class="cm-variable">eat</span>(<span class="cm-variable">food</span>);
+  }
+}
+</pre>
     </div>
   </div>
   
@@ -1462,6 +1866,8 @@ <h2>Loops and Comprehensions</h2>
     <div class="col-md-6 coffeescript-input-column">
       <textarea class="coffeescript-input" id="range_comprehensions-coffee">countdown = (num for num in [10..1])
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">countdown</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">num</span> <span class="cm-keyword">for</span> <span class="cm-variable">num</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-number">10..1</span><span class="cm-punctuation">])</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="range_comprehensions-js">var countdown, num;
@@ -1475,12 +1881,26 @@ <h2>Loops and Comprehensions</h2>
   return results;
 })();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">countdown</span>, <span class="cm-def">num</span>;
+
+<span class="cm-variable">countdown</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">i</span>, <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [];
+  <span class="cm-keyword">for</span> (<span class="cm-variable">num</span> <span class="cm-operator">=</span> <span class="cm-variable-2">i</span> <span class="cm-operator">=</span> <span class="cm-number">10</span>; <span class="cm-variable-2">i</span> <span class="cm-operator">>=</span> <span class="cm-number">1</span>; <span class="cm-variable">num</span> <span class="cm-operator">=</span> <span class="cm-operator">--</span><span class="cm-variable-2">i</span>) {
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-variable">num</span>);
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+})();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="range_comprehensions" data-run="countdown"><small>▶</small>&ensp;countdown</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="range_comprehensions" data-run="countdown"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>countdown</button>
     </div>
   </div>
   
@@ -1499,6 +1919,11 @@ <h2>Loops and Comprehensions</h2>
 ages = for child, age of yearsOld
   "#{child} is #{age}"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">yearsOld</span> <span class="cm-punctuation">=</span> <span class="cm-variable">max</span><span class="cm-punctuation">:</span> <span class="cm-number">10</span><span class="cm-punctuation">,</span> <span class="cm-variable">ida</span><span class="cm-punctuation">:</span> <span class="cm-number">9</span><span class="cm-punctuation">,</span> <span class="cm-variable">tim</span><span class="cm-punctuation">:</span> <span class="cm-number">11</span>
+
+<span class="cm-variable">ages</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">for</span> <span class="cm-variable">child</span><span class="cm-punctuation">,</span> <span class="cm-variable">age</span> <span class="cm-keyword">of</span> <span class="cm-variable">yearsOld</span>
+  <span class="cm-string">"#{child} is #{age}"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="object_comprehensions-js">var age, ages, child, yearsOld;
@@ -1519,12 +1944,33 @@ <h2>Loops and Comprehensions</h2>
   return results;
 })();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">age</span>, <span class="cm-def">ages</span>, <span class="cm-def">child</span>, <span class="cm-def">yearsOld</span>;
+
+<span class="cm-variable">yearsOld</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">max</span>: <span class="cm-number">10</span>,
+  <span class="cm-property">ida</span>: <span class="cm-number">9</span>,
+  <span class="cm-property">tim</span>: <span class="cm-number">11</span>
+};
+
+<span class="cm-variable">ages</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [];
+  <span class="cm-keyword">for</span> (<span class="cm-variable">child</span> <span class="cm-keyword">in</span> <span class="cm-variable">yearsOld</span>) {
+    <span class="cm-variable">age</span> <span class="cm-operator">=</span> <span class="cm-variable">yearsOld</span>[<span class="cm-variable">child</span>];
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-string-2">`${</span><span class="cm-variable">child</span><span class="cm-string-2">}</span> <span class="cm-string-2">is ${</span><span class="cm-variable">age</span><span class="cm-string-2">}`</span>);
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+})();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_comprehensions" data-run="ages.join%28%22%2C%20%22%29"><small>▶</small>&ensp;ages.join(&quot;, &quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_comprehensions" data-run="ages.join%28%22%2C%20%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>ages.join(&quot;, &quot;)</button>
     </div>
   </div>
   
@@ -1546,6 +1992,17 @@ <h2>Loops and Comprehensions</h2>
   "#{num} little monkeys, jumping on the bed.
     One fell out and bumped his head."
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># Econ 101</span>
+<span class="cm-keyword">if</span> <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">studyingEconomics</span>
+  <span class="cm-variable">buy</span><span class="cm-punctuation">()</span>  <span class="cm-keyword">while</span> <span class="cm-variable">supply</span> <span class="cm-operator">></span> <span class="cm-variable">demand</span>
+<span class="cm-dedent">  </span><span class="cm-variable">sell</span><span class="cm-punctuation">()</span> <span class="cm-keyword">until</span> <span class="cm-variable">supply</span> <span class="cm-operator">></span> <span class="cm-variable">demand</span>
+
+<span class="cm-comment"># Nursery Rhyme</span>
+<span class="cm-variable">num</span> <span class="cm-punctuation">=</span> <span class="cm-number">6</span>
+<span class="cm-variable">lyrics</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">while</span> <span class="cm-variable">num</span> <span class="cm-operator">-=</span> <span class="cm-number">1</span>
+  <span class="cm-string">"#{num} little monkeys, jumping on the bed.</span>
+<span class="cm-string">    One fell out and bumped his head."</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="while-js">// Econ 101
@@ -1572,12 +2029,39 @@ <h2>Loops and Comprehensions</h2>
   return results;
 })();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// Econ 101</span>
+<span class="cm-keyword">var</span> <span class="cm-def">lyrics</span>, <span class="cm-def">num</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-keyword">this</span>.<span class="cm-property">studyingEconomics</span>) {
+  <span class="cm-keyword">while</span> (<span class="cm-variable">supply</span> <span class="cm-operator">></span> <span class="cm-variable">demand</span>) {
+    <span class="cm-variable">buy</span>();
+  }
+  <span class="cm-keyword">while</span> (<span class="cm-operator">!</span>(<span class="cm-variable">supply</span> <span class="cm-operator">></span> <span class="cm-variable">demand</span>)) {
+    <span class="cm-variable">sell</span>();
+  }
+}
+
+<span class="cm-comment">// Nursery Rhyme</span>
+<span class="cm-variable">num</span> <span class="cm-operator">=</span> <span class="cm-number">6</span>;
+
+<span class="cm-variable">lyrics</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [];
+  <span class="cm-keyword">while</span> (<span class="cm-variable">num</span> <span class="cm-operator">-=</span> <span class="cm-number">1</span>) {
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-string-2">`${</span><span class="cm-variable">num</span><span class="cm-string-2">}</span> <span class="cm-string-2">little monkeys, jumping on the bed. One fell out and bumped his head.`</span>);
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+})();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="while" data-run="lyrics.join%28%22%5Cn%22%29"><small>▶</small>&ensp;lyrics.join(&quot;\n&quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="while" data-run="lyrics.join%28%22%5Cn%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>lyrics.join(&quot;\n&quot;)</button>
     </div>
   </div>
   
@@ -1593,6 +2077,12 @@ <h2>Loops and Comprehensions</h2>
       fs.readFile filename, (err, contents) ->
         compile filename, contents.toString()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">for</span> <span class="cm-variable">filename</span> <span class="cm-operator">in</span> <span class="cm-variable">list</span>
+  <span class="cm-keyword">do</span> <span class="cm-punctuation">(</span><span class="cm-variable">filename</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-keyword">if</span> <span class="cm-variable">filename</span> <span class="cm-operator">not</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-string">'.DS_Store'</span><span class="cm-punctuation">,</span> <span class="cm-string">'Thumbs.db'</span><span class="cm-punctuation">,</span> <span class="cm-string">'ehthumbs.db'</span><span class="cm-punctuation">]</span>
+      <span class="cm-variable">fs</span><span class="cm-punctuation">.</span><span class="cm-property">readFile</span> <span class="cm-variable">filename</span><span class="cm-punctuation">,</span> <span class="cm-punctuation">(</span><span class="cm-variable">err</span><span class="cm-punctuation">,</span> <span class="cm-variable">contents</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+        <span class="cm-variable">compile</span> <span class="cm-variable">filename</span><span class="cm-punctuation">,</span> <span class="cm-variable">contents</span><span class="cm-punctuation">.</span><span class="cm-property">toString</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="do-js">var filename, fn, i, len;
@@ -1609,6 +2099,20 @@ <h2>Loops and Comprehensions</h2>
   fn(filename);
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">filename</span>, <span class="cm-def">fn</span>, <span class="cm-def">i</span>, <span class="cm-def">len</span>;
+
+<span class="cm-variable">fn</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">filename</span>) {
+  <span class="cm-keyword">if</span> (<span class="cm-variable-2">filename</span> <span class="cm-operator">!==</span> <span class="cm-string">'.DS_Store'</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable-2">filename</span> <span class="cm-operator">!==</span> <span class="cm-string">'Thumbs.db'</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable-2">filename</span> <span class="cm-operator">!==</span> <span class="cm-string">'ehthumbs.db'</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-variable">fs</span>.<span class="cm-property">readFile</span>(<span class="cm-variable-2">filename</span>, <span class="cm-keyword">function</span>(<span class="cm-def">err</span>, <span class="cm-def">contents</span>) {
+      <span class="cm-keyword">return</span> <span class="cm-variable">compile</span>(<span class="cm-variable-2">filename</span>, <span class="cm-variable-2">contents</span>.<span class="cm-property">toString</span>());
+    });
+  }
+};
+<span class="cm-keyword">for</span> (<span class="cm-variable">i</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable">len</span> <span class="cm-operator">=</span> <span class="cm-variable">list</span>.<span class="cm-property">length</span>; <span class="cm-variable">i</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">len</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {
+  <span class="cm-variable">filename</span> <span class="cm-operator">=</span> <span class="cm-variable">list</span>[<span class="cm-variable">i</span>];
+  <span class="cm-variable">fn</span>(<span class="cm-variable">filename</span>);
+}
+</pre>
     </div>
   </div>
   
@@ -1631,6 +2135,16 @@ <h2>Array Slicing and Splicing with Ranges</h2>
 
 copy    = numbers[..]
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">numbers</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">2</span><span class="cm-punctuation">,</span> <span class="cm-number">3</span><span class="cm-punctuation">,</span> <span class="cm-number">4</span><span class="cm-punctuation">,</span> <span class="cm-number">5</span><span class="cm-punctuation">,</span> <span class="cm-number">6</span><span class="cm-punctuation">,</span> <span class="cm-number">7</span><span class="cm-punctuation">,</span> <span class="cm-number">8</span><span class="cm-punctuation">,</span> <span class="cm-number">9</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">start</span>   <span class="cm-punctuation">=</span> <span class="cm-variable">numbers</span><span class="cm-punctuation">[</span><span class="cm-number">0..2</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">middle</span>  <span class="cm-punctuation">=</span> <span class="cm-variable">numbers</span><span class="cm-punctuation">[</span><span class="cm-number">3</span><span class="cm-punctuation">...</span><span class="cm-number">-2</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">end</span>     <span class="cm-punctuation">=</span> <span class="cm-variable">numbers</span><span class="cm-punctuation">[</span><span class="cm-number">-2</span><span class="cm-punctuation">..]</span>
+
+<span class="cm-variable">copy</span>    <span class="cm-punctuation">=</span> <span class="cm-variable">numbers</span><span class="cm-punctuation">[..]</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="slices-js">var copy, end, middle, numbers, start;
@@ -1645,12 +2159,27 @@ <h2>Array Slicing and Splicing with Ranges</h2>
 
 copy = numbers.slice(0);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">copy</span>, <span class="cm-def">end</span>, <span class="cm-def">middle</span>, <span class="cm-def">numbers</span>, <span class="cm-def">start</span>;
+
+<span class="cm-variable">numbers</span> <span class="cm-operator">=</span> [<span class="cm-number">1</span>, <span class="cm-number">2</span>, <span class="cm-number">3</span>, <span class="cm-number">4</span>, <span class="cm-number">5</span>, <span class="cm-number">6</span>, <span class="cm-number">7</span>, <span class="cm-number">8</span>, <span class="cm-number">9</span>];
+
+<span class="cm-variable">start</span> <span class="cm-operator">=</span> <span class="cm-variable">numbers</span>.<span class="cm-property">slice</span>(<span class="cm-number">0</span>, <span class="cm-number">3</span>);
+
+<span class="cm-variable">middle</span> <span class="cm-operator">=</span> <span class="cm-variable">numbers</span>.<span class="cm-property">slice</span>(<span class="cm-number">3</span>, <span class="cm-operator">-</span><span class="cm-number">2</span>);
+
+<span class="cm-variable">end</span> <span class="cm-operator">=</span> <span class="cm-variable">numbers</span>.<span class="cm-property">slice</span>(<span class="cm-operator">-</span><span class="cm-number">2</span>);
+
+<span class="cm-variable">copy</span> <span class="cm-operator">=</span> <span class="cm-variable">numbers</span>.<span class="cm-property">slice</span>(<span class="cm-number">0</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="slices" data-run="middle"><small>▶</small>&ensp;middle</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="slices" data-run="middle"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>middle</button>
     </div>
   </div>
   
@@ -1663,6 +2192,10 @@ <h2>Array Slicing and Splicing with Ranges</h2>
 
 numbers[3..6] = [-3, -4, -5, -6]
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">numbers</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">0</span><span class="cm-punctuation">,</span> <span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">2</span><span class="cm-punctuation">,</span> <span class="cm-number">3</span><span class="cm-punctuation">,</span> <span class="cm-number">4</span><span class="cm-punctuation">,</span> <span class="cm-number">5</span><span class="cm-punctuation">,</span> <span class="cm-number">6</span><span class="cm-punctuation">,</span> <span class="cm-number">7</span><span class="cm-punctuation">,</span> <span class="cm-number">8</span><span class="cm-punctuation">,</span> <span class="cm-number">9</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">numbers</span><span class="cm-punctuation">[</span><span class="cm-number">3..6</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">-3</span><span class="cm-punctuation">,</span> <span class="cm-number">-4</span><span class="cm-punctuation">,</span> <span class="cm-number">-5</span><span class="cm-punctuation">,</span> <span class="cm-number">-6</span><span class="cm-punctuation">]</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="splices-js">var numbers, ref,
@@ -1672,12 +2205,22 @@ <h2>Array Slicing and Splicing with Ranges</h2>
 
 splice.apply(numbers, [3, 4].concat(ref = [-3, -4, -5, -6])), ref;
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">numbers</span>, <span class="cm-def">ref</span>,
+  <span class="cm-def">splice</span> <span class="cm-operator">=</span> [].<span class="cm-property">splice</span>;
+
+<span class="cm-variable">numbers</span> <span class="cm-operator">=</span> [<span class="cm-number">0</span>, <span class="cm-number">1</span>, <span class="cm-number">2</span>, <span class="cm-number">3</span>, <span class="cm-number">4</span>, <span class="cm-number">5</span>, <span class="cm-number">6</span>, <span class="cm-number">7</span>, <span class="cm-number">8</span>, <span class="cm-number">9</span>];
+
+<span class="cm-variable">splice</span>.<span class="cm-property">apply</span>(<span class="cm-variable">numbers</span>, [<span class="cm-number">3</span>, <span class="cm-number">4</span>].<span class="cm-property">concat</span>(<span class="cm-variable">ref</span> <span class="cm-operator">=</span> [<span class="cm-operator">-</span><span class="cm-number">3</span>, <span class="cm-operator">-</span><span class="cm-number">4</span>, <span class="cm-operator">-</span><span class="cm-number">5</span>, <span class="cm-operator">-</span><span class="cm-number">6</span>])), <span class="cm-variable">ref</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="splices" data-run="numbers"><small>▶</small>&ensp;numbers</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="splices" data-run="numbers"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>numbers</button>
     </div>
   </div>
   
@@ -1701,6 +2244,16 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
 
 eldest = if 24 > 21 then "Liz" else "Ike"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">grade</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">student</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-keyword">if</span> <span class="cm-variable">student</span><span class="cm-punctuation">.</span><span class="cm-property">excellentWork</span>
+    <span class="cm-string">"A+"</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">else</span> <span class="cm-keyword">if</span> <span class="cm-variable">student</span><span class="cm-punctuation">.</span><span class="cm-property">okayStuff</span>
+<span class="cm-dedent">    </span><span class="cm-keyword">if</span> <span class="cm-variable">student</span><span class="cm-punctuation">.</span><span class="cm-property">triedHard</span> <span class="cm-keyword">then</span> <span class="cm-string">"B"</span> <span class="cm-keyword">else</span> <span class="cm-string">"B-"</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">else</span>
+    <span class="cm-string">"C"</span>
+
+<span class="cm-variable">eldest</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">if</span> <span class="cm-number">24</span> <span class="cm-operator">></span> <span class="cm-number">21</span> <span class="cm-keyword">then</span> <span class="cm-string">"Liz"</span> <span class="cm-keyword">else</span> <span class="cm-string">"Ike"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="expressions-js">var eldest, grade;
@@ -1721,12 +2274,33 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
 
 eldest = 24 > 21 ? "Liz" : "Ike";
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">eldest</span>, <span class="cm-def">grade</span>;
+
+<span class="cm-variable">grade</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">student</span>) {
+  <span class="cm-keyword">if</span> (<span class="cm-variable-2">student</span>.<span class="cm-property">excellentWork</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-string">"A+"</span>;
+  } <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable-2">student</span>.<span class="cm-property">okayStuff</span>) {
+    <span class="cm-keyword">if</span> (<span class="cm-variable-2">student</span>.<span class="cm-property">triedHard</span>) {
+      <span class="cm-keyword">return</span> <span class="cm-string">"B"</span>;
+    } <span class="cm-keyword">else</span> {
+      <span class="cm-keyword">return</span> <span class="cm-string">"B-"</span>;
+    }
+  } <span class="cm-keyword">else</span> {
+    <span class="cm-keyword">return</span> <span class="cm-string">"C"</span>;
+  }
+};
+
+<span class="cm-variable">eldest</span> <span class="cm-operator">=</span> <span class="cm-number">24</span> <span class="cm-operator">></span> <span class="cm-number">21</span> <span class="cm-operator">?</span> <span class="cm-string">"Liz"</span> : <span class="cm-string">"Ike"</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions" data-run="eldest"><small>▶</small>&ensp;eldest</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions" data-run="eldest"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>eldest</button>
     </div>
   </div>
   
@@ -1738,18 +2312,27 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
     <div class="col-md-6 coffeescript-input-column">
       <textarea class="coffeescript-input" id="expressions_assignment-coffee">six = (one = 1) + (two = 2) + (three = 3)
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">six</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">one</span> <span class="cm-punctuation">=</span> <span class="cm-number">1</span><span class="cm-punctuation">)</span> <span class="cm-operator">+</span> <span class="cm-punctuation">(</span><span class="cm-variable">two</span> <span class="cm-punctuation">=</span> <span class="cm-number">2</span><span class="cm-punctuation">)</span> <span class="cm-operator">+</span> <span class="cm-punctuation">(</span><span class="cm-variable">three</span> <span class="cm-punctuation">=</span> <span class="cm-number">3</span><span class="cm-punctuation">)</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="expressions_assignment-js">var one, six, three, two;
 
 six = (one = 1) + (two = 2) + (three = 3);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">one</span>, <span class="cm-def">six</span>, <span class="cm-def">three</span>, <span class="cm-def">two</span>;
+
+<span class="cm-variable">six</span> <span class="cm-operator">=</span> (<span class="cm-variable">one</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>) <span class="cm-operator">+</span> (<span class="cm-variable">two</span> <span class="cm-operator">=</span> <span class="cm-number">2</span>) <span class="cm-operator">+</span> (<span class="cm-variable">three</span> <span class="cm-operator">=</span> <span class="cm-number">3</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_assignment" data-run="six"><small>▶</small>&ensp;six</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_assignment" data-run="six"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>six</button>
     </div>
   </div>
   
@@ -1762,6 +2345,10 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
 
 globals = (name for name of window)[0...10]
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># The first ten global properties.</span>
+
+<span class="cm-variable">globals</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">name</span> <span class="cm-keyword">for</span> <span class="cm-variable">name</span> <span class="cm-keyword">of</span> <span class="cm-variable">window</span><span class="cm-punctuation">)[</span><span class="cm-number">0</span><span class="cm-punctuation">...</span><span class="cm-number">10</span><span class="cm-punctuation">]</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="expressions_comprehension-js">// The first ten global properties.
@@ -1776,12 +2363,27 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
   return results;
 })()).slice(0, 10);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// The first ten global properties.</span>
+<span class="cm-keyword">var</span> <span class="cm-def">globals</span>, <span class="cm-def">name</span>;
+
+<span class="cm-variable">globals</span> <span class="cm-operator">=</span> ((<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [];
+  <span class="cm-keyword">for</span> (<span class="cm-variable">name</span> <span class="cm-keyword">in</span> <span class="cm-variable">window</span>) {
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-variable">name</span>);
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+})()).<span class="cm-property">slice</span>(<span class="cm-number">0</span>, <span class="cm-number">10</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_comprehension" data-run="globals"><small>▶</small>&ensp;globals</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_comprehension" data-run="globals"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>globals</button>
     </div>
   </div>
   
@@ -1797,6 +2399,13 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
     "And the error is ... #{error}"
 )
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">alert</span><span class="cm-punctuation">(</span>
+  <span class="cm-keyword">try</span>
+<span class="cm-indent">    </span><span class="cm-variable">nonexistent</span> <span class="cm-operator">/</span> <span class="cm-atom">undefined</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">catch</span> <span class="cm-variable">error</span>
+    <span class="cm-string">"And the error is ... #{error}"</span>
+<span class="cm-punctuation">)</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="expressions_try-js">var error;
@@ -1810,12 +2419,23 @@ <h2>Everything is an Expression (at least, as much as possible)</h2>
   }
 })());
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">error</span>;
+
+<span class="cm-variable">alert</span>((<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">try</span> {
+    <span class="cm-keyword">return</span> <span class="cm-variable">nonexistent</span> <span class="cm-operator">/</span> <span class="cm-variable">void</span> <span class="cm-number">0</span>;
+  } <span class="cm-keyword">catch</span> (<span class="cm-def">error1</span>) {
+    <span class="cm-variable">error</span> <span class="cm-operator">=</span> <span class="cm-variable-2">error1</span>;
+    <span class="cm-keyword">return</span> <span class="cm-string-2">`And the error is ... ${</span><span class="cm-variable">error</span><span class="cm-string-2">}`</span>;
+  }
+})());
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_try" data-run="true">▶</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expressions_try" data-run="true"></button>
     </div>
   </div>
   
@@ -1843,6 +2463,11 @@ <h2>Operators and Aliases</h2>
 
 tabs.selectTabAtIndex((tabs.currentIndex - count) %% tabs.length)
 </textarea>
+      <pre class="placeholder-code"><span class="cm-number">-7</span> <span class="cm-operator">%</span> <span class="cm-number">5</span> <span class="cm-operator">==</span> <span class="cm-number">-2</span> <span class="cm-comment"># The remainder of 7 / 5</span>
+<span class="cm-number">-7</span> <span class="cm-operator">%%</span> <span class="cm-number">5</span> <span class="cm-operator">==</span> <span class="cm-number">3</span> <span class="cm-comment"># n %% 5 is always between 0 and 4</span>
+
+<span class="cm-variable">tabs</span><span class="cm-punctuation">.</span><span class="cm-property">selectTabAtIndex</span><span class="cm-punctuation">((</span><span class="cm-variable">tabs</span><span class="cm-punctuation">.</span><span class="cm-property">currentIndex</span> <span class="cm-operator">-</span> <span class="cm-variable">count</span><span class="cm-punctuation">)</span> <span class="cm-operator">%%</span> <span class="cm-variable">tabs</span><span class="cm-punctuation">.</span><span class="cm-property">length</span><span class="cm-punctuation">)</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="modulo-js">var modulo = function(a, b) { return (+a % (b = +b) + b) % b; };
@@ -1853,6 +2478,14 @@ <h2>Operators and Aliases</h2>
 
 tabs.selectTabAtIndex(modulo(tabs.currentIndex - count, tabs.length));
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">modulo</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">a</span>, <span class="cm-def">b</span>) { <span class="cm-keyword">return</span> (<span class="cm-operator">+</span><span class="cm-variable-2">a</span> <span class="cm-operator">%</span> (<span class="cm-variable-2">b</span> <span class="cm-operator">=</span> <span class="cm-operator">+</span><span class="cm-variable-2">b</span>) <span class="cm-operator">+</span> <span class="cm-variable-2">b</span>) <span class="cm-operator">%</span> <span class="cm-variable-2">b</span>; };
+
+<span class="cm-operator">-</span><span class="cm-number">7</span> <span class="cm-operator">%</span> <span class="cm-number">5</span> <span class="cm-operator">===</span> <span class="cm-operator">-</span><span class="cm-number">2</span>; <span class="cm-comment">// The remainder of 7 / 5</span>
+
+<span class="cm-variable">modulo</span>(<span class="cm-operator">-</span><span class="cm-number">7</span>, <span class="cm-number">5</span>) <span class="cm-operator">===</span> <span class="cm-number">3</span>; <span class="cm-comment">// n %% 5 is always between 0 and 4</span>
+
+<span class="cm-variable">tabs</span>.<span class="cm-property">selectTabAtIndex</span>(<span class="cm-variable">modulo</span>(<span class="cm-variable">tabs</span>.<span class="cm-property">currentIndex</span> <span class="cm-operator">-</span> <span class="cm-variable">count</span>, <span class="cm-variable">tabs</span>.<span class="cm-property">length</span>));
+</pre>
     </div>
   </div>
   
@@ -1939,6 +2572,18 @@ <h2>Operators and Aliases</h2>
 
 print inspect "My name is #{@name}"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">launch</span><span class="cm-punctuation">()</span> <span class="cm-keyword">if</span> <span class="cm-variable">ignition</span> <span class="cm-operator">is</span> <span class="cm-atom">on</span>
+
+<span class="cm-variable">volume</span> <span class="cm-punctuation">=</span> <span class="cm-number">10</span> <span class="cm-keyword">if</span> <span class="cm-variable">band</span> <span class="cm-operator">isnt</span> <span class="cm-variable">SpinalTap</span>
+
+<span class="cm-variable">letTheWildRumpusBegin</span><span class="cm-punctuation">()</span> <span class="cm-keyword">unless</span> <span class="cm-variable">answer</span> <span class="cm-operator">is</span> <span class="cm-atom">no</span>
+
+<span class="cm-keyword">if</span> <span class="cm-variable">car</span><span class="cm-punctuation">.</span><span class="cm-property">speed</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">limit</span> <span class="cm-keyword">then</span> <span class="cm-variable">accelerate</span><span class="cm-punctuation">()</span>
+
+<span class="cm-variable">winner</span> <span class="cm-punctuation">=</span> <span class="cm-atom">yes</span> <span class="cm-keyword">if</span> <span class="cm-variable">pick</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-number">47</span><span class="cm-punctuation">,</span> <span class="cm-number">92</span><span class="cm-punctuation">,</span> <span class="cm-number">13</span><span class="cm-punctuation">]</span>
+
+<span class="cm-variable">print</span> <span class="cm-variable">inspect</span> <span class="cm-string">"My name is #{@name}"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="aliases-js">var volume, winner;
@@ -1965,6 +2610,30 @@ <h2>Operators and Aliases</h2>
 
 print(inspect(`My name is ${this.name}`));
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">volume</span>, <span class="cm-def">winner</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">ignition</span> <span class="cm-operator">===</span> <span class="cm-atom">true</span>) {
+  <span class="cm-variable">launch</span>();
+}
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">band</span> <span class="cm-operator">!==</span> <span class="cm-variable">SpinalTap</span>) {
+  <span class="cm-variable">volume</span> <span class="cm-operator">=</span> <span class="cm-number">10</span>;
+}
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">answer</span> <span class="cm-operator">!==</span> <span class="cm-atom">false</span>) {
+  <span class="cm-variable">letTheWildRumpusBegin</span>();
+}
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">car</span>.<span class="cm-property">speed</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">limit</span>) {
+  <span class="cm-variable">accelerate</span>();
+}
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">pick</span> <span class="cm-operator">===</span> <span class="cm-number">47</span> <span class="cm-operator">||</span> <span class="cm-variable">pick</span> <span class="cm-operator">===</span> <span class="cm-number">92</span> <span class="cm-operator">||</span> <span class="cm-variable">pick</span> <span class="cm-operator">===</span> <span class="cm-number">13</span>) {
+  <span class="cm-variable">winner</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;
+}
+
+<span class="cm-variable">print</span>(<span class="cm-variable">inspect</span>(<span class="cm-string-2">`My name is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}`</span>));
+</pre>
     </div>
   </div>
   
@@ -1985,6 +2654,13 @@ <h2>The Existential Operator</h2>
 
 footprints = yeti ? "bear"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">solipsism</span> <span class="cm-punctuation">=</span> <span class="cm-atom">true</span> <span class="cm-keyword">if</span> <span class="cm-variable">mind</span><span class="cm-operator">?</span> <span class="cm-operator">and</span> <span class="cm-operator">not</span> <span class="cm-variable">world</span><span class="cm-operator">?</span>
+
+<span class="cm-variable">speed</span> <span class="cm-punctuation">=</span> <span class="cm-number">0</span>
+<span class="cm-variable">speed</span> <span class="cm-operator">?</span><span class="cm-punctuation">=</span> <span class="cm-number">15</span>
+
+<span class="cm-variable">footprints</span> <span class="cm-punctuation">=</span> <span class="cm-variable">yeti</span> <span class="cm-operator">?</span> <span class="cm-string">"bear"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="existence-js">var footprints, solipsism, speed;
@@ -2001,12 +2677,29 @@ <h2>The Existential Operator</h2>
 
 footprints = typeof yeti !== "undefined" && yeti !== null ? yeti : "bear";
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">footprints</span>, <span class="cm-def">solipsism</span>, <span class="cm-def">speed</span>;
+
+<span class="cm-keyword">if</span> ((<span class="cm-keyword">typeof</span> <span class="cm-variable">mind</span> <span class="cm-operator">!==</span> <span class="cm-string">"undefined"</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">mind</span> <span class="cm-operator">!==</span> <span class="cm-atom">null</span>) <span class="cm-operator">&amp;&amp;</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable">world</span> <span class="cm-operator">===</span> <span class="cm-string">"undefined"</span> <span class="cm-operator">||</span> <span class="cm-variable">world</span> <span class="cm-operator">===</span> <span class="cm-atom">null</span>)) {
+  <span class="cm-variable">solipsism</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;
+}
+
+<span class="cm-variable">speed</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">speed</span> <span class="cm-operator">==</span> <span class="cm-atom">null</span>) {
+  <span class="cm-variable">speed</span> <span class="cm-operator">=</span> <span class="cm-number">15</span>;
+}
+
+<span class="cm-variable">footprints</span> <span class="cm-operator">=</span> <span class="cm-keyword">typeof</span> <span class="cm-variable">yeti</span> <span class="cm-operator">!==</span> <span class="cm-string">"undefined"</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">yeti</span> <span class="cm-operator">!==</span> <span class="cm-atom">null</span> <span class="cm-operator">?</span> <span class="cm-variable">yeti</span> : <span class="cm-string">"bear"</span>;
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="existence" data-run="footprints"><small>▶</small>&ensp;footprints</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="existence" data-run="footprints"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>footprints</button>
     </div>
   </div>
   
@@ -2020,6 +2713,11 @@ <h2>The Existential Operator</h2>
 unless major?
   signUpForClass 'Introduction to Wines'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">major</span> <span class="cm-punctuation">=</span> <span class="cm-string">'Computer Science'</span>
+
+<span class="cm-keyword">unless</span> <span class="cm-variable">major</span><span class="cm-operator">?</span>
+  <span class="cm-variable">signUpForClass</span> <span class="cm-string">'Introduction to Wines'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="existence_declared-js">var major;
@@ -2030,6 +2728,14 @@ <h2>The Existential Operator</h2>
   signUpForClass('Introduction to Wines');
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">major</span>;
+
+<span class="cm-variable">major</span> <span class="cm-operator">=</span> <span class="cm-string">'Computer Science'</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-variable">major</span> <span class="cm-operator">==</span> <span class="cm-atom">null</span>) {
+  <span class="cm-variable">signUpForClass</span>(<span class="cm-string">'Introduction to Wines'</span>);
+}
+</pre>
     </div>
   </div>
   
@@ -2041,6 +2747,9 @@ <h2>The Existential Operator</h2>
       <textarea class="coffeescript-input" id="existence_undeclared-coffee">if window?
   environment = 'browser (probably)'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">if</span> <span class="cm-variable">window</span><span class="cm-operator">?</span>
+  <span class="cm-variable">environment</span> <span class="cm-punctuation">=</span> <span class="cm-string">'browser (probably)'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="existence_undeclared-js">var environment;
@@ -2049,6 +2758,12 @@ <h2>The Existential Operator</h2>
   environment = 'browser (probably)';
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">environment</span>;
+
+<span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable">window</span> <span class="cm-operator">!==</span> <span class="cm-string">"undefined"</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">window</span> <span class="cm-operator">!==</span> <span class="cm-atom">null</span>) {
+  <span class="cm-variable">environment</span> <span class="cm-operator">=</span> <span class="cm-string">'browser (probably)'</span>;
+}
+</pre>
     </div>
   </div>
   
@@ -2059,12 +2774,18 @@ <h2>The Existential Operator</h2>
     <div class="col-md-6 coffeescript-input-column">
       <textarea class="coffeescript-input" id="soaks-coffee">zip = lottery.drawWinner?().address?.zipcode
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">zip</span> <span class="cm-punctuation">=</span> <span class="cm-variable">lottery</span><span class="cm-punctuation">.</span><span class="cm-property">drawWinner</span><span class="cm-operator">?</span><span class="cm-punctuation">().</span><span class="cm-property">address</span><span class="cm-operator">?</span><span class="cm-punctuation">.</span><span class="cm-property">zipcode</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="soaks-js">var ref, zip;
 
 zip = typeof lottery.drawWinner === "function" ? (ref = lottery.drawWinner().address) != null ? ref.zipcode : void 0 : void 0;
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">ref</span>, <span class="cm-def">zip</span>;
+
+<span class="cm-variable">zip</span> <span class="cm-operator">=</span> <span class="cm-keyword">typeof</span> <span class="cm-variable">lottery</span>.<span class="cm-property">drawWinner</span> <span class="cm-operator">===</span> <span class="cm-string">"function"</span> <span class="cm-operator">?</span> (<span class="cm-variable">ref</span> <span class="cm-operator">=</span> <span class="cm-variable">lottery</span>.<span class="cm-property">drawWinner</span>().<span class="cm-property">address</span>) <span class="cm-operator">!=</span> <span class="cm-atom">null</span> <span class="cm-operator">?</span> <span class="cm-variable">ref</span>.<span class="cm-property">zipcode</span> : <span class="cm-variable">void</span> <span class="cm-number">0</span> : <span class="cm-variable">void</span> <span class="cm-number">0</span>;
+</pre>
     </div>
   </div>
   
@@ -2115,12 +2836,23 @@ <h2>Chaining Function Calls</h2>
   .addClass 'show'
 .css 'background', 'white'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">$</span> <span class="cm-string">'body'</span>
+<span class="cm-punctuation">.</span><span class="cm-property">click</span> <span class="cm-punctuation">(</span><span class="cm-variable">e</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">$</span> <span class="cm-string">'.box'</span>
+  <span class="cm-punctuation">.</span><span class="cm-property">fadeIn</span> <span class="cm-string">'fast'</span>
+  <span class="cm-punctuation">.</span><span class="cm-property">addClass</span> <span class="cm-string">'show'</span>
+<span class="cm-punctuation">.</span><span class="cm-property">css</span> <span class="cm-string">'background'</span><span class="cm-punctuation">,</span> <span class="cm-string">'white'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="chaining-js">$('body').click(function(e) {
   return $('.box').fadeIn('fast').addClass('show');
 }).css('background', 'white');
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">$</span>(<span class="cm-string">'body'</span>).<span class="cm-property">click</span>(<span class="cm-keyword">function</span>(<span class="cm-def">e</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable">$</span>(<span class="cm-string">'.box'</span>).<span class="cm-property">fadeIn</span>(<span class="cm-string">'fast'</span>).<span class="cm-property">addClass</span>(<span class="cm-string">'show'</span>);
+}).<span class="cm-property">css</span>(<span class="cm-string">'background'</span>, <span class="cm-string">'white'</span>);
+</pre>
     </div>
   </div>
   
@@ -2138,6 +2870,11 @@ <h2>Destructuring Assignment</h2>
 
 [theBait, theSwitch] = [theSwitch, theBait]
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">theBait</span>   <span class="cm-punctuation">=</span> <span class="cm-number">1000</span>
+<span class="cm-variable">theSwitch</span> <span class="cm-punctuation">=</span> <span class="cm-number">0</span>
+
+<span class="cm-punctuation">[</span><span class="cm-variable">theBait</span><span class="cm-punctuation">,</span> <span class="cm-variable">theSwitch</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-variable">theSwitch</span><span class="cm-punctuation">,</span> <span class="cm-variable">theBait</span><span class="cm-punctuation">]</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="parallel_assignment-js">var theBait, theSwitch;
@@ -2148,12 +2885,23 @@ <h2>Destructuring Assignment</h2>
 
 [theBait, theSwitch] = [theSwitch, theBait];
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">theBait</span>, <span class="cm-def">theSwitch</span>;
+
+<span class="cm-variable">theBait</span> <span class="cm-operator">=</span> <span class="cm-number">1000</span>;
+
+<span class="cm-variable">theSwitch</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
+
+[<span class="cm-variable">theBait</span>, <span class="cm-variable">theSwitch</span>] <span class="cm-operator">=</span> [<span class="cm-variable">theSwitch</span>, <span class="cm-variable">theBait</span>];
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="parallel_assignment" data-run="theBait"><small>▶</small>&ensp;theBait</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="parallel_assignment" data-run="theBait"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>theBait</button>
     </div>
   </div>
   
@@ -2168,6 +2916,12 @@ <h2>Destructuring Assignment</h2>
 
 [city, temp, forecast] = weatherReport "Berkeley, CA"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">weatherReport</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">location</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-comment"># Make an Ajax request to fetch the weather...</span>
+  <span class="cm-punctuation">[</span><span class="cm-variable">location</span><span class="cm-punctuation">,</span> <span class="cm-number">72</span><span class="cm-punctuation">,</span> <span class="cm-string">"Mostly Sunny"</span><span class="cm-punctuation">]</span>
+
+<span class="cm-punctuation">[</span><span class="cm-variable">city</span><span class="cm-punctuation">,</span> <span class="cm-variable">temp</span><span class="cm-punctuation">,</span> <span class="cm-variable">forecast</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-variable">weatherReport</span> <span class="cm-string">"Berkeley, CA"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="multiple_return_values-js">var city, forecast, temp, weatherReport;
@@ -2179,12 +2933,24 @@ <h2>Destructuring Assignment</h2>
 
 [city, temp, forecast] = weatherReport("Berkeley, CA");
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">city</span>, <span class="cm-def">forecast</span>, <span class="cm-def">temp</span>, <span class="cm-def">weatherReport</span>;
+
+<span class="cm-variable">weatherReport</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">location</span>) {
+  <span class="cm-comment">// Make an Ajax request to fetch the weather...</span>
+  <span class="cm-keyword">return</span> [<span class="cm-variable-2">location</span>, <span class="cm-number">72</span>, <span class="cm-string">"Mostly Sunny"</span>];
+};
+
+[<span class="cm-variable">city</span>, <span class="cm-variable">temp</span>, <span class="cm-variable">forecast</span>] <span class="cm-operator">=</span> <span class="cm-variable">weatherReport</span>(<span class="cm-string">"Berkeley, CA"</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="multiple_return_values" data-run="forecast"><small>▶</small>&ensp;forecast</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="multiple_return_values" data-run="forecast"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>forecast</button>
     </div>
   </div>
   
@@ -2207,6 +2973,20 @@ <h2>Destructuring Assignment</h2>
 
 {poet: {name, address: [street, city]}} = futurists
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">futurists</span> <span class="cm-punctuation">=</span>
+<span class="cm-indent">  </span><span class="cm-variable">sculptor</span><span class="cm-punctuation">:</span> <span class="cm-string">"Umberto Boccioni"</span>
+  <span class="cm-variable">painter</span><span class="cm-punctuation">:</span>  <span class="cm-string">"Vladimir Burliuk"</span>
+  <span class="cm-variable">poet</span><span class="cm-punctuation">:</span>
+<span class="cm-indent">    </span><span class="cm-variable">name</span><span class="cm-punctuation">:</span>   <span class="cm-string">"F.T. Marinetti"</span>
+    <span class="cm-variable">address</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">[</span>
+      <span class="cm-string">"Via Roma 42R"</span>
+      <span class="cm-string">"Bellagio, Italy 22021"</span>
+<span class="cm-dedent">    </span><span class="cm-punctuation">]</span>
+
+<span class="cm-punctuation">{</span><span class="cm-variable">sculptor</span><span class="cm-punctuation">}</span> <span class="cm-punctuation">=</span> <span class="cm-variable">futurists</span>
+
+<span class="cm-punctuation">{</span><span class="cm-variable">poet</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">{</span><span class="cm-variable">name</span><span class="cm-punctuation">,</span> <span class="cm-variable">address</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">[</span><span class="cm-variable">street</span><span class="cm-punctuation">,</span> <span class="cm-variable">city</span><span class="cm-punctuation">]}}</span> <span class="cm-punctuation">=</span> <span class="cm-variable">futurists</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="object_extraction-js">var city, futurists, name, sculptor, street;
@@ -2229,12 +3009,35 @@ <h2>Destructuring Assignment</h2>
   }
 } = futurists);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">city</span>, <span class="cm-def">futurists</span>, <span class="cm-def">name</span>, <span class="cm-def">sculptor</span>, <span class="cm-def">street</span>;
+
+<span class="cm-variable">futurists</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">sculptor</span>: <span class="cm-string">"Umberto Boccioni"</span>,
+  <span class="cm-property">painter</span>: <span class="cm-string">"Vladimir Burliuk"</span>,
+  <span class="cm-property">poet</span>: {
+    <span class="cm-property">name</span>: <span class="cm-string">"F.T. Marinetti"</span>,
+    <span class="cm-property">address</span>: [<span class="cm-string">"Via Roma 42R"</span>, <span class="cm-string">"Bellagio, Italy 22021"</span>]
+  }
+};
+
+({<span class="cm-property">sculptor</span>} <span class="cm-operator">=</span> <span class="cm-variable">futurists</span>);
+
+({
+  <span class="cm-property">poet</span>: {
+    <span class="cm-property">name</span>,
+    <span class="cm-property">address</span>: [<span class="cm-variable">street</span>, <span class="cm-variable">city</span>]
+  }
+} <span class="cm-operator">=</span> <span class="cm-variable">futurists</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_extraction" data-run="name%20+%20%22-%22%20+%20street"><small>▶</small>&ensp;name + &quot;-&quot; + street</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_extraction" data-run="name%20+%20%22-%22%20+%20street"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>name + &quot;-&quot; + street</button>
     </div>
   </div>
   
@@ -2247,6 +3050,10 @@ <h2>Destructuring Assignment</h2>
 
 [open, contents..., close] = tag.split("")
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">tag</span> <span class="cm-punctuation">=</span> <span class="cm-string">"&lt;impossible>"</span>
+
+<span class="cm-punctuation">[</span><span class="cm-variable">open</span><span class="cm-punctuation">,</span> <span class="cm-variable">contents</span><span class="cm-punctuation">...,</span> <span class="cm-variable">close</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-variable">tag</span><span class="cm-punctuation">.</span><span class="cm-property">split</span><span class="cm-punctuation">(</span><span class="cm-string">""</span><span class="cm-punctuation">)</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="patterns_and_splats-js">var close, contents, i, open, ref, tag,
@@ -2256,12 +3063,22 @@ <h2>Destructuring Assignment</h2>
 
 ref = tag.split(""), open = ref[0], contents = 3 <= ref.length ? slice.call(ref, 1, i = ref.length - 1) : (i = 1, []), close = ref[i++];
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">close</span>, <span class="cm-def">contents</span>, <span class="cm-def">i</span>, <span class="cm-def">open</span>, <span class="cm-def">ref</span>, <span class="cm-def">tag</span>,
+  <span class="cm-def">slice</span> <span class="cm-operator">=</span> [].<span class="cm-property">slice</span>;
+
+<span class="cm-variable">tag</span> <span class="cm-operator">=</span> <span class="cm-string">"&lt;impossible>"</span>;
+
+<span class="cm-variable">ref</span> <span class="cm-operator">=</span> <span class="cm-variable">tag</span>.<span class="cm-property">split</span>(<span class="cm-string">""</span>), <span class="cm-variable">open</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>[<span class="cm-number">0</span>], <span class="cm-variable">contents</span> <span class="cm-operator">=</span> <span class="cm-number">3</span> <span class="cm-operator">&lt;=</span> <span class="cm-variable">ref</span>.<span class="cm-property">length</span> <span class="cm-operator">?</span> <span class="cm-variable">slice</span>.<span class="cm-property">call</span>(<span class="cm-variable">ref</span>, <span class="cm-number">1</span>, <span class="cm-variable">i</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>.<span class="cm-property">length</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>) : (<span class="cm-variable">i</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>, []), <span class="cm-variable">close</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>[<span class="cm-variable">i</span><span class="cm-operator">++</span>];
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="patterns_and_splats" data-run="contents.join%28%22%22%29"><small>▶</small>&ensp;contents.join(&quot;&quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="patterns_and_splats" data-run="contents.join%28%22%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>contents.join(&quot;&quot;)</button>
     </div>
   </div>
   
@@ -2275,6 +3092,11 @@ <h2>Destructuring Assignment</h2>
 
 [first, ..., last] = text.split " "
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">text</span> <span class="cm-punctuation">=</span> <span class="cm-string">"Every literary critic believes he will</span>
+<span class="cm-string">        outwit history and have the last word"</span>
+
+<span class="cm-punctuation">[</span><span class="cm-variable">first</span><span class="cm-punctuation">,</span> <span class="cm-punctuation">...,</span> <span class="cm-variable">last</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-variable">text</span><span class="cm-punctuation">.</span><span class="cm-property">split</span> <span class="cm-string">" "</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="expansion-js">var first, last, ref, text;
@@ -2283,12 +3105,21 @@ <h2>Destructuring Assignment</h2>
 
 ref = text.split(" "), first = ref[0], last = ref[ref.length - 1];
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">first</span>, <span class="cm-def">last</span>, <span class="cm-def">ref</span>, <span class="cm-def">text</span>;
+
+<span class="cm-variable">text</span> <span class="cm-operator">=</span> <span class="cm-string">"Every literary critic believes he will outwit history and have the last word"</span>;
+
+<span class="cm-variable">ref</span> <span class="cm-operator">=</span> <span class="cm-variable">text</span>.<span class="cm-property">split</span>(<span class="cm-string">" "</span>), <span class="cm-variable">first</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>[<span class="cm-number">0</span>], <span class="cm-variable">last</span> <span class="cm-operator">=</span> <span class="cm-variable">ref</span>[<span class="cm-variable">ref</span>.<span class="cm-property">length</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>];
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expansion" data-run="first%20+%20%22%20%22%20+%20last"><small>▶</small>&ensp;first + &quot; &quot; + last</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="expansion" data-run="first%20+%20%22%20%22%20+%20last"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>first + &quot; &quot; + last</button>
     </div>
   </div>
   
@@ -2303,6 +3134,12 @@ <h2>Destructuring Assignment</h2>
 
 tim = new Person name: 'Tim', age: 4
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">Person</span>
+  <span class="cm-variable">constructor</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-variable">options</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-punctuation">{</span><span class="cm-property">@name</span><span class="cm-punctuation">,</span> <span class="cm-property">@age</span><span class="cm-punctuation">,</span> <span class="cm-property">@height</span> <span class="cm-punctuation">=</span> <span class="cm-string">'average'</span><span class="cm-punctuation">}</span> <span class="cm-punctuation">=</span> <span class="cm-variable">options</span>
+
+<span class="cm-variable">tim</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Person</span> <span class="cm-variable">name</span><span class="cm-punctuation">:</span> <span class="cm-string">'Tim'</span><span class="cm-punctuation">,</span> <span class="cm-variable">age</span><span class="cm-punctuation">:</span> <span class="cm-number">4</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="constructor_destructuring-js">var Person, tim;
@@ -2319,12 +3156,29 @@ <h2>Destructuring Assignment</h2>
   age: 4
 });
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">Person</span>, <span class="cm-def">tim</span>;
+
+<span class="cm-variable">Person</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Person</span> {
+  <span class="cm-property">constructor</span>(<span class="cm-def">options</span>) {
+    ({<span class="cm-property">name</span>: <span class="cm-keyword">this</span>.<span class="cm-property">name</span>, <span class="cm-property">age</span>: <span class="cm-keyword">this</span>.<span class="cm-property">age</span>, <span class="cm-property">height</span>: <span class="cm-keyword">this</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-string">'average'</span>} <span class="cm-operator">=</span> <span class="cm-variable-2">options</span>);
+  }
+
+};
+
+<span class="cm-variable">tim</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Person</span>({
+  <span class="cm-property">name</span>: <span class="cm-string">'Tim'</span>,
+  <span class="cm-property">age</span>: <span class="cm-number">4</span>
+});
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="constructor_destructuring" data-run="tim.age%20+%20%22%20%22%20+%20tim.height"><small>▶</small>&ensp;tim.age + &quot; &quot; + tim.height</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="constructor_destructuring" data-run="tim.age%20+%20%22%20%22%20+%20tim.height"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>tim.age + &quot; &quot; + tim.height</button>
     </div>
   </div>
   
@@ -2346,6 +3200,13 @@ <h2>Bound (Fat Arrow) Functions</h2>
   $('.shopping_cart').on 'click', (event) =>
     @customer.purchase @cart
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">Account</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">customer</span><span class="cm-punctuation">,</span> <span class="cm-variable">cart</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-property">@customer</span> <span class="cm-punctuation">=</span> <span class="cm-variable">customer</span>
+  <span class="cm-property">@cart</span> <span class="cm-punctuation">=</span> <span class="cm-variable">cart</span>
+
+  <span class="cm-variable">$</span><span class="cm-punctuation">(</span><span class="cm-string">'.shopping_cart'</span><span class="cm-punctuation">).</span><span class="cm-atom">on</span> <span class="cm-string">'click'</span><span class="cm-punctuation">,</span> <span class="cm-punctuation">(</span><span class="cm-variable">event</span><span class="cm-punctuation">)</span> <span class="cm-operator">=></span>
+    <span class="cm-property">@customer</span><span class="cm-punctuation">.</span><span class="cm-property">purchase</span> <span class="cm-property">@cart</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="fat_arrow-js">var Account;
@@ -2358,6 +3219,16 @@ <h2>Bound (Fat Arrow) Functions</h2>
   });
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">Account</span>;
+
+<span class="cm-variable">Account</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">customer</span>, <span class="cm-def">cart</span>) {
+  <span class="cm-keyword">this</span>.<span class="cm-property">customer</span> <span class="cm-operator">=</span> <span class="cm-variable-2">customer</span>;
+  <span class="cm-keyword">this</span>.<span class="cm-property">cart</span> <span class="cm-operator">=</span> <span class="cm-variable-2">cart</span>;
+  <span class="cm-keyword">return</span> <span class="cm-variable">$</span>(<span class="cm-string">'.shopping_cart'</span>).<span class="cm-property">on</span>(<span class="cm-string">'click'</span>, (<span class="cm-def">event</span>) <span class="cm-operator">=></span> {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">customer</span>.<span class="cm-property">purchase</span>(<span class="cm-keyword">this</span>.<span class="cm-property">cart</span>);
+  });
+};
+</pre>
     </div>
   </div>
   
@@ -2381,6 +3252,15 @@ <h2>Generator Functions</h2>
 
 window.ps or= perfectSquares()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">perfectSquares</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">num</span> <span class="cm-punctuation">=</span> <span class="cm-number">0</span>
+  <span class="cm-keyword">loop</span>
+    <span class="cm-variable">num</span> <span class="cm-operator">+=</span> <span class="cm-number">1</span>
+    <span class="cm-variable">yield</span> <span class="cm-variable">num</span> <span class="cm-operator">*</span> <span class="cm-variable">num</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">return</span>
+
+<span class="cm-variable">window</span><span class="cm-punctuation">.</span><span class="cm-property">ps</span> <span class="cm-operator">or=</span> <span class="cm-variable">perfectSquares</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="generators-js">var perfectSquares;
@@ -2396,12 +3276,28 @@ <h2>Generator Functions</h2>
 
 window.ps || (window.ps = perfectSquares());
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">perfectSquares</span>;
+
+<span class="cm-variable">perfectSquares</span> <span class="cm-operator">=</span> <span class="cm-keyword">function*</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">num</span>;
+  <span class="cm-variable-2">num</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
+  <span class="cm-keyword">while</span> (<span class="cm-atom">true</span>) {
+    <span class="cm-variable-2">num</span> <span class="cm-operator">+=</span> <span class="cm-number">1</span>;
+    <span class="cm-keyword">yield</span> <span class="cm-variable-2">num</span> <span class="cm-operator">*</span> <span class="cm-variable-2">num</span>;
+  }
+};
+
+<span class="cm-variable">window</span>.<span class="cm-property">ps</span> <span class="cm-operator">||</span> (<span class="cm-variable">window</span>.<span class="cm-property">ps</span> <span class="cm-operator">=</span> <span class="cm-variable">perfectSquares</span>());
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="generators" data-run="ps.next%28%29.value"><small>▶</small>&ensp;ps.next().value</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="generators" data-run="ps.next%28%29.value"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>ps.next().value</button>
     </div>
   </div>
   
@@ -2426,6 +3322,20 @@ <h2>Generator Functions</h2>
     break if results.length is length
   results
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">fibonacci</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+  <span class="cm-punctuation">[</span><span class="cm-variable">previous</span><span class="cm-punctuation">,</span> <span class="cm-variable">current</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">1</span><span class="cm-punctuation">]</span>
+  <span class="cm-keyword">loop</span>
+    <span class="cm-punctuation">[</span><span class="cm-variable">previous</span><span class="cm-punctuation">,</span> <span class="cm-variable">current</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-variable">current</span><span class="cm-punctuation">,</span> <span class="cm-variable">previous</span> <span class="cm-operator">+</span> <span class="cm-variable">current</span><span class="cm-punctuation">]</span>
+    <span class="cm-variable">yield</span> <span class="cm-variable">current</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">return</span>
+
+<span class="cm-variable">getFibonacciNumbers</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">length</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">results</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-number">1</span><span class="cm-punctuation">]</span>
+  <span class="cm-keyword">for</span> <span class="cm-variable">n</span> <span class="cm-variable">from</span> <span class="cm-variable">fibonacci</span><span class="cm-punctuation">()</span>
+    <span class="cm-variable">results</span><span class="cm-punctuation">.</span><span class="cm-property">push</span> <span class="cm-variable">n</span>
+    <span class="cm-keyword">break</span> <span class="cm-keyword">if</span> <span class="cm-variable">results</span><span class="cm-punctuation">.</span><span class="cm-property">length</span> <span class="cm-operator">is</span> <span class="cm-variable">length</span>
+<span class="cm-dedent">  </span><span class="cm-variable">results</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="generator_iteration-js">var fibonacci, getFibonacciNumbers;
@@ -2452,12 +3362,39 @@ <h2>Generator Functions</h2>
   return results;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">fibonacci</span>, <span class="cm-def">getFibonacciNumbers</span>;
+
+<span class="cm-variable">fibonacci</span> <span class="cm-operator">=</span> <span class="cm-keyword">function*</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">current</span>, <span class="cm-def">previous</span>;
+  [<span class="cm-variable-2">previous</span>, <span class="cm-variable-2">current</span>] <span class="cm-operator">=</span> [<span class="cm-number">1</span>, <span class="cm-number">1</span>];
+  <span class="cm-keyword">while</span> (<span class="cm-atom">true</span>) {
+    [<span class="cm-variable-2">previous</span>, <span class="cm-variable-2">current</span>] <span class="cm-operator">=</span> [<span class="cm-variable-2">current</span>, <span class="cm-variable-2">previous</span> <span class="cm-operator">+</span> <span class="cm-variable-2">current</span>];
+    <span class="cm-keyword">yield</span> <span class="cm-variable-2">current</span>;
+  }
+};
+
+<span class="cm-variable">getFibonacciNumbers</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">length</span>) {
+  <span class="cm-keyword">var</span> <span class="cm-def">n</span>, <span class="cm-def">ref</span>, <span class="cm-def">results</span>;
+  <span class="cm-variable-2">results</span> <span class="cm-operator">=</span> [<span class="cm-number">1</span>];
+  <span class="cm-variable-2">ref</span> <span class="cm-operator">=</span> <span class="cm-variable">fibonacci</span>();
+  <span class="cm-keyword">for</span> (<span class="cm-variable-2">n</span> <span class="cm-keyword">of</span> <span class="cm-variable-2">ref</span>) {
+    <span class="cm-variable-2">results</span>.<span class="cm-property">push</span>(<span class="cm-variable-2">n</span>);
+    <span class="cm-keyword">if</span> (<span class="cm-variable-2">results</span>.<span class="cm-property">length</span> <span class="cm-operator">===</span> <span class="cm-variable-2">length</span>) {
+      <span class="cm-keyword">break</span>;
+    }
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">results</span>;
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="generator_iteration" data-run="getFibonacciNumbers%2810%29"><small>▶</small>&ensp;getFibonacciNumbers(10)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="generator_iteration" data-run="getFibonacciNumbers%2810%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>getFibonacciNumbers(10)</button>
     </div>
   </div>
   
@@ -2490,6 +3427,25 @@ <h2>Async Functions</h2>
 
 countdown 3
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># Your browser must support async/await and speech synthesis</span>
+<span class="cm-comment"># to run this example.</span>
+
+<span class="cm-variable">sleep</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">ms</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-keyword">new</span> <span class="cm-variable">Promise</span> <span class="cm-punctuation">(</span><span class="cm-variable">resolve</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">window</span><span class="cm-punctuation">.</span><span class="cm-property">setTimeout</span> <span class="cm-variable">resolve</span><span class="cm-punctuation">,</span> <span class="cm-variable">ms</span>
+
+<span class="cm-variable">say</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">text</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">window</span><span class="cm-punctuation">.</span><span class="cm-property">speechSynthesis</span><span class="cm-punctuation">.</span><span class="cm-property">cancel</span><span class="cm-punctuation">()</span>
+  <span class="cm-variable">window</span><span class="cm-punctuation">.</span><span class="cm-property">speechSynthesis</span><span class="cm-punctuation">.</span><span class="cm-property">speak</span> <span class="cm-keyword">new</span> <span class="cm-variable">SpeechSynthesisUtterance</span> <span class="cm-variable">text</span>
+
+<span class="cm-variable">countdown</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">seconds</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-keyword">for</span> <span class="cm-variable">i</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-variable">seconds</span><span class="cm-punctuation">..</span><span class="cm-number">1</span><span class="cm-punctuation">]</span>
+    <span class="cm-variable">say</span> <span class="cm-variable">i</span>
+    <span class="cm-variable">await</span> <span class="cm-variable">sleep</span> <span class="cm-number">1000</span> <span class="cm-comment"># wait one second</span>
+<span class="cm-dedent">  </span><span class="cm-variable">say</span> <span class="cm-string">"Blastoff!"</span>
+
+<span class="cm-variable">countdown</span> <span class="cm-number">3</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="async-js">// Your browser must support async/await and speech synthesis
@@ -2518,12 +3474,38 @@ <h2>Async Functions</h2>
 
 countdown(3);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// Your browser must support async/await and speech synthesis</span>
+<span class="cm-comment">// to run this example.</span>
+<span class="cm-keyword">var</span> <span class="cm-def">countdown</span>, <span class="cm-def">say</span>, <span class="cm-def">sleep</span>;
+
+<span class="cm-variable">sleep</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">ms</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-keyword">new</span> <span class="cm-variable">Promise</span>(<span class="cm-keyword">function</span>(<span class="cm-def">resolve</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-variable">window</span>.<span class="cm-property">setTimeout</span>(<span class="cm-variable-2">resolve</span>, <span class="cm-variable-2">ms</span>);
+  });
+};
+
+<span class="cm-variable">say</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">text</span>) {
+  <span class="cm-variable">window</span>.<span class="cm-property">speechSynthesis</span>.<span class="cm-property">cancel</span>();
+  <span class="cm-keyword">return</span> <span class="cm-variable">window</span>.<span class="cm-property">speechSynthesis</span>.<span class="cm-property">speak</span>(<span class="cm-keyword">new</span> <span class="cm-variable">SpeechSynthesisUtterance</span>(<span class="cm-variable-2">text</span>));
+};
+
+<span class="cm-variable">countdown</span> <span class="cm-operator">=</span> <span class="cm-keyword">async</span> <span class="cm-keyword">function</span>(<span class="cm-def">seconds</span>) {
+  <span class="cm-keyword">var</span> <span class="cm-def">i</span>, <span class="cm-def">j</span>, <span class="cm-def">ref</span>;
+  <span class="cm-keyword">for</span> (<span class="cm-variable-2">i</span> <span class="cm-operator">=</span> <span class="cm-variable-2">j</span> <span class="cm-operator">=</span> <span class="cm-variable-2">ref</span> <span class="cm-operator">=</span> <span class="cm-variable-2">seconds</span>; <span class="cm-variable-2">ref</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">1</span> <span class="cm-operator">?</span> <span class="cm-variable-2">j</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">1</span> : <span class="cm-variable-2">j</span> <span class="cm-operator">>=</span> <span class="cm-number">1</span>; <span class="cm-variable-2">i</span> <span class="cm-operator">=</span> <span class="cm-variable-2">ref</span> <span class="cm-operator">&lt;=</span> <span class="cm-number">1</span> <span class="cm-operator">?</span> <span class="cm-operator">++</span><span class="cm-variable-2">j</span> : <span class="cm-operator">--</span><span class="cm-variable-2">j</span>) {
+    <span class="cm-variable">say</span>(<span class="cm-variable-2">i</span>);
+    <span class="cm-keyword">await</span> <span class="cm-variable">sleep</span>(<span class="cm-number">1000</span>); <span class="cm-comment">// wait one second</span>
+  }
+  <span class="cm-keyword">return</span> <span class="cm-variable">say</span>(<span class="cm-string">"Blastoff!"</span>);
+};
+
+<span class="cm-variable">countdown</span>(<span class="cm-number">3</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="async" data-run="true">▶</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="async" data-run="true"></button>
     </div>
   </div>
   
@@ -2558,6 +3540,28 @@ <h2>Classes</h2>
 sam.move()
 tom.move()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span>
+  <span class="cm-variable">constructor</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-property">@name</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+
+<span class="cm-dedent">  </span><span class="cm-variable">move</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-variable">meters</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">alert</span> <span class="cm-property">@name</span> <span class="cm-operator">+</span> <span class="cm-string">" moved #{meters}m."</span>
+
+<span class="cm-keyword">class</span> <span class="cm-variable">Snake</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span>
+  <span class="cm-variable">move</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">alert</span> <span class="cm-string">"Slithering..."</span>
+    <span class="cm-variable">super</span> <span class="cm-number">5</span>
+
+<span class="cm-keyword">class</span> <span class="cm-variable">Horse</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span>
+  <span class="cm-variable">move</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">alert</span> <span class="cm-string">"Galloping..."</span>
+    <span class="cm-variable">super</span> <span class="cm-number">45</span>
+
+<span class="cm-variable">sam</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Snake</span> <span class="cm-string">"Sammy the Python"</span>
+<span class="cm-variable">tom</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Horse</span> <span class="cm-string">"Tommy the Palomino"</span>
+
+<span class="cm-variable">sam</span><span class="cm-punctuation">.</span><span class="cm-property">move</span><span class="cm-punctuation">()</span>
+<span class="cm-variable">tom</span><span class="cm-punctuation">.</span><span class="cm-property">move</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="classes-js">var Animal, Horse, Snake, sam, tom;
@@ -2597,12 +3601,49 @@ <h2>Classes</h2>
 
 tom.move();
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">Animal</span>, <span class="cm-def">Horse</span>, <span class="cm-def">Snake</span>, <span class="cm-def">sam</span>, <span class="cm-def">tom</span>;
+
+<span class="cm-variable">Animal</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Animal</span> {
+  <span class="cm-property">constructor</span>(<span class="cm-def">name</span>) {
+    <span class="cm-keyword">this</span>.<span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-variable-2">name</span>;
+  }
+
+  <span class="cm-property">move</span>(<span class="cm-def">meters</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-variable">alert</span>(<span class="cm-keyword">this</span>.<span class="cm-property">name</span> <span class="cm-operator">+</span> <span class="cm-string-2">` moved ${</span><span class="cm-variable-2">meters</span><span class="cm-string-2">}m.`</span>);
+  }
+
+};
+
+<span class="cm-variable">Snake</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Snake</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
+  <span class="cm-property">move</span>() {
+    <span class="cm-variable">alert</span>(<span class="cm-string">"Slithering..."</span>);
+    <span class="cm-keyword">return</span> <span class="cm-keyword">super</span>.<span class="cm-property">move</span>(<span class="cm-number">5</span>);
+  }
+
+};
+
+<span class="cm-variable">Horse</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Horse</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
+  <span class="cm-property">move</span>() {
+    <span class="cm-variable">alert</span>(<span class="cm-string">"Galloping..."</span>);
+    <span class="cm-keyword">return</span> <span class="cm-keyword">super</span>.<span class="cm-property">move</span>(<span class="cm-number">45</span>);
+  }
+
+};
+
+<span class="cm-variable">sam</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Snake</span>(<span class="cm-string">"Sammy the Python"</span>);
+
+<span class="cm-variable">tom</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Horse</span>(<span class="cm-string">"Tommy the Palomino"</span>);
+
+<span class="cm-variable">sam</span>.<span class="cm-property">move</span>();
+
+<span class="cm-variable">tom</span>.<span class="cm-property">move</span>();
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="classes" data-run="true">▶</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="classes" data-run="true"></button>
     </div>
   </div>
   
@@ -2612,15 +3653,25 @@ <h2>Classes</h2>
   <div class="row">
     <div class="col-md-6 coffeescript-input-column">
       <textarea class="coffeescript-input" id="static-coffee">class Teenager
-	@say: (speech) ->
-		words = speech.split ' '
-		fillers = ['uh', 'um', 'like', 'actually', 'so', 'maybe']
-		output = []
-		for word, index in words
-			output.push word
-			output.push fillers[Math.floor(Math.random() * fillers.length)] unless index is words.length - 1
-		output.join ', '
-</textarea>
+  @say: (speech) ->
+    words = speech.split ' '
+    fillers = ['uh', 'um', 'like', 'actually', 'so', 'maybe']
+    output = []
+    for word, index in words
+      output.push word
+      output.push fillers[Math.floor(Math.random() * fillers.length)] unless index is words.length - 1
+    output.join ', '
+</textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">Teenager</span>
+  <span class="cm-property">@say</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-variable">speech</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">words</span> <span class="cm-punctuation">=</span> <span class="cm-variable">speech</span><span class="cm-punctuation">.</span><span class="cm-property">split</span> <span class="cm-string">' '</span>
+    <span class="cm-variable">fillers</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[</span><span class="cm-string">'uh'</span><span class="cm-punctuation">,</span> <span class="cm-string">'um'</span><span class="cm-punctuation">,</span> <span class="cm-string">'like'</span><span class="cm-punctuation">,</span> <span class="cm-string">'actually'</span><span class="cm-punctuation">,</span> <span class="cm-string">'so'</span><span class="cm-punctuation">,</span> <span class="cm-string">'maybe'</span><span class="cm-punctuation">]</span>
+    <span class="cm-variable">output</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">[]</span>
+    <span class="cm-keyword">for</span> <span class="cm-variable">word</span><span class="cm-punctuation">,</span> <span class="cm-variable">index</span> <span class="cm-operator">in</span> <span class="cm-variable">words</span>
+      <span class="cm-variable">output</span><span class="cm-punctuation">.</span><span class="cm-property">push</span> <span class="cm-variable">word</span>
+      <span class="cm-variable">output</span><span class="cm-punctuation">.</span><span class="cm-property">push</span> <span class="cm-variable">fillers</span><span class="cm-punctuation">[</span><span class="cm-variable">Math</span><span class="cm-punctuation">.</span><span class="cm-property">floor</span><span class="cm-punctuation">(</span><span class="cm-variable">Math</span><span class="cm-punctuation">.</span><span class="cm-property">random</span><span class="cm-punctuation">()</span> <span class="cm-operator">*</span> <span class="cm-variable">fillers</span><span class="cm-punctuation">.</span><span class="cm-property">length</span><span class="cm-punctuation">)]</span> <span class="cm-keyword">unless</span> <span class="cm-variable">index</span> <span class="cm-operator">is</span> <span class="cm-variable">words</span><span class="cm-punctuation">.</span><span class="cm-property">length</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>
+<span class="cm-dedent">    </span><span class="cm-variable">output</span><span class="cm-punctuation">.</span><span class="cm-property">join</span> <span class="cm-string">', '</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="static-js">var Teenager;
@@ -2643,12 +3694,35 @@ <h2>Classes</h2>
 
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">Teenager</span>;
+
+<span class="cm-variable">Teenager</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Teenager</span> {
+  <span class="cm-keyword">static</span> <span class="cm-property">say</span>(<span class="cm-def">speech</span>) {
+    <span class="cm-keyword">var</span> <span class="cm-def">fillers</span>, <span class="cm-def">i</span>, <span class="cm-def">index</span>, <span class="cm-def">len</span>, <span class="cm-def">output</span>, <span class="cm-def">word</span>, <span class="cm-def">words</span>;
+    <span class="cm-variable-2">words</span> <span class="cm-operator">=</span> <span class="cm-variable-2">speech</span>.<span class="cm-property">split</span>(<span class="cm-string">' '</span>);
+    <span class="cm-variable-2">fillers</span> <span class="cm-operator">=</span> [<span class="cm-string">'uh'</span>, <span class="cm-string">'um'</span>, <span class="cm-string">'like'</span>, <span class="cm-string">'actually'</span>, <span class="cm-string">'so'</span>, <span class="cm-string">'maybe'</span>];
+    <span class="cm-variable-2">output</span> <span class="cm-operator">=</span> [];
+    <span class="cm-keyword">for</span> (<span class="cm-variable-2">index</span> <span class="cm-operator">=</span> <span class="cm-variable-2">i</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>, <span class="cm-variable-2">len</span> <span class="cm-operator">=</span> <span class="cm-variable-2">words</span>.<span class="cm-property">length</span>; <span class="cm-variable-2">i</span> <span class="cm-operator">&lt;</span> <span class="cm-variable-2">len</span>; <span class="cm-variable-2">index</span> <span class="cm-operator">=</span> <span class="cm-operator">++</span><span class="cm-variable-2">i</span>) {
+      <span class="cm-variable-2">word</span> <span class="cm-operator">=</span> <span class="cm-variable-2">words</span>[<span class="cm-variable-2">index</span>];
+      <span class="cm-variable-2">output</span>.<span class="cm-property">push</span>(<span class="cm-variable-2">word</span>);
+      <span class="cm-keyword">if</span> (<span class="cm-variable-2">index</span> <span class="cm-operator">!==</span> <span class="cm-variable-2">words</span>.<span class="cm-property">length</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>) {
+        <span class="cm-variable-2">output</span>.<span class="cm-property">push</span>(<span class="cm-variable-2">fillers</span>[<span class="cm-variable">Math</span>.<span class="cm-property">floor</span>(<span class="cm-variable">Math</span>.<span class="cm-property">random</span>() <span class="cm-operator">*</span> <span class="cm-variable-2">fillers</span>.<span class="cm-property">length</span>)]);
+      }
+    }
+    <span class="cm-keyword">return</span> <span class="cm-variable-2">output</span>.<span class="cm-property">join</span>(<span class="cm-string">', '</span>);
+  }
+
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="static" data-run="Teenager.say%28%22Are%20we%20there%20yet%3F%22%29"><small>▶</small>&ensp;Teenager.say(&quot;Are we there yet?&quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="static" data-run="Teenager.say%28%22Are%20we%20there%20yet%3F%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>Teenager.say(&quot;Are we there yet?&quot;)</button>
     </div>
   </div>
   
@@ -2665,18 +3739,28 @@ <h2>Prototypal Inheritance</h2>
       <textarea class="coffeescript-input" id="prototypes-coffee">String::dasherize = ->
   this.replace /_/g, "-"
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">String</span><span class="cm-punctuation">::</span><span class="cm-variable">dasherize</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+  <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">replace</span> <span class="cm-string-2">/_/</span><span class="cm-variable">g</span><span class="cm-punctuation">,</span> <span class="cm-string">"-"</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="prototypes-js">String.prototype.dasherize = function() {
   return this.replace(/_/g, "-");
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">String</span>.<span class="cm-property">prototype</span>.<span class="cm-property">dasherize</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">replace</span>(<span class="cm-string-2">/_/g</span>, <span class="cm-string">"-"</span>);
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="prototypes" data-run="%22one_two%22.dasherize%28%29"><small>▶</small>&ensp;&quot;one_two&quot;.dasherize()</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="prototypes" data-run="%22one_two%22.dasherize%28%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>&quot;one_two&quot;.dasherize()</button>
     </div>
   </div>
   
@@ -2701,6 +3785,17 @@ <h2>Switch/When/Else</h2>
   when "Sun" then go church
   else go work
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">switch</span> <span class="cm-variable">day</span>
+  <span class="cm-keyword">when</span> <span class="cm-string">"Mon"</span> <span class="cm-keyword">then</span> <span class="cm-variable">go</span> <span class="cm-variable">work</span>
+  <span class="cm-keyword">when</span> <span class="cm-string">"Tue"</span> <span class="cm-keyword">then</span> <span class="cm-variable">go</span> <span class="cm-variable">relax</span>
+  <span class="cm-keyword">when</span> <span class="cm-string">"Thu"</span> <span class="cm-keyword">then</span> <span class="cm-variable">go</span> <span class="cm-variable">iceFishing</span>
+  <span class="cm-keyword">when</span> <span class="cm-string">"Fri"</span><span class="cm-punctuation">,</span> <span class="cm-string">"Sat"</span>
+<span class="cm-indent">    </span><span class="cm-keyword">if</span> <span class="cm-variable">day</span> <span class="cm-operator">is</span> <span class="cm-variable">bingoDay</span>
+      <span class="cm-variable">go</span> <span class="cm-variable">bingo</span>
+      <span class="cm-variable">go</span> <span class="cm-variable">dancing</span>
+<span class="cm-dedent">  </span><span class="cm-keyword">when</span> <span class="cm-string">"Sun"</span> <span class="cm-keyword">then</span> <span class="cm-variable">go</span> <span class="cm-variable">church</span>
+  <span class="cm-keyword">else</span> <span class="cm-variable">go</span> <span class="cm-variable">work</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="switch-js">switch (day) {
@@ -2727,6 +3822,30 @@ <h2>Switch/When/Else</h2>
     go(work);
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">switch</span> (<span class="cm-variable">day</span>) {
+  <span class="cm-keyword">case</span> <span class="cm-string">"Mon"</span>:
+    <span class="cm-variable">go</span>(<span class="cm-variable">work</span>);
+    <span class="cm-keyword">break</span>;
+  <span class="cm-keyword">case</span> <span class="cm-string">"Tue"</span>:
+    <span class="cm-variable">go</span>(<span class="cm-variable">relax</span>);
+    <span class="cm-keyword">break</span>;
+  <span class="cm-keyword">case</span> <span class="cm-string">"Thu"</span>:
+    <span class="cm-variable">go</span>(<span class="cm-variable">iceFishing</span>);
+    <span class="cm-keyword">break</span>;
+  <span class="cm-keyword">case</span> <span class="cm-string">"Fri"</span>:
+  <span class="cm-keyword">case</span> <span class="cm-string">"Sat"</span>:
+    <span class="cm-keyword">if</span> (<span class="cm-variable">day</span> <span class="cm-operator">===</span> <span class="cm-variable">bingoDay</span>) {
+      <span class="cm-variable">go</span>(<span class="cm-variable">bingo</span>);
+      <span class="cm-variable">go</span>(<span class="cm-variable">dancing</span>);
+    }
+    <span class="cm-keyword">break</span>;
+  <span class="cm-keyword">case</span> <span class="cm-string">"Sun"</span>:
+    <span class="cm-variable">go</span>(<span class="cm-variable">church</span>);
+    <span class="cm-keyword">break</span>;
+  <span class="cm-keyword">default</span>:
+    <span class="cm-variable">go</span>(<span class="cm-variable">work</span>);
+}
+</pre>
     </div>
   </div>
   
@@ -2744,6 +3863,15 @@ <h2>Switch/When/Else</h2>
   else 'A'
 # grade == 'C'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">score</span> <span class="cm-punctuation">=</span> <span class="cm-number">76</span>
+<span class="cm-variable">grade</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">switch</span>
+  <span class="cm-keyword">when</span> <span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">60</span> <span class="cm-keyword">then</span> <span class="cm-string">'F'</span>
+  <span class="cm-keyword">when</span> <span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">70</span> <span class="cm-keyword">then</span> <span class="cm-string">'D'</span>
+  <span class="cm-keyword">when</span> <span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">80</span> <span class="cm-keyword">then</span> <span class="cm-string">'C'</span>
+  <span class="cm-keyword">when</span> <span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">90</span> <span class="cm-keyword">then</span> <span class="cm-string">'B'</span>
+  <span class="cm-keyword">else</span> <span class="cm-string">'A'</span>
+<span class="cm-comment"># grade == 'C'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="switch_with_no_expression-js">var grade, score;
@@ -2767,6 +3895,27 @@ <h2>Switch/When/Else</h2>
 
 // grade == 'C'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">grade</span>, <span class="cm-def">score</span>;
+
+<span class="cm-variable">score</span> <span class="cm-operator">=</span> <span class="cm-number">76</span>;
+
+<span class="cm-variable">grade</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">switch</span> (<span class="cm-atom">false</span>) {
+    <span class="cm-keyword">case</span> <span class="cm-operator">!</span>(<span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">60</span>):
+      <span class="cm-keyword">return</span> <span class="cm-string">'F'</span>;
+    <span class="cm-keyword">case</span> <span class="cm-operator">!</span>(<span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">70</span>):
+      <span class="cm-keyword">return</span> <span class="cm-string">'D'</span>;
+    <span class="cm-keyword">case</span> <span class="cm-operator">!</span>(<span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">80</span>):
+      <span class="cm-keyword">return</span> <span class="cm-string">'C'</span>;
+    <span class="cm-keyword">case</span> <span class="cm-operator">!</span>(<span class="cm-variable">score</span> <span class="cm-operator">&lt;</span> <span class="cm-number">90</span>):
+      <span class="cm-keyword">return</span> <span class="cm-string">'B'</span>;
+    <span class="cm-keyword">default</span>:
+      <span class="cm-keyword">return</span> <span class="cm-string">'A'</span>;
+  }
+})();
+
+<span class="cm-comment">// grade == 'C'</span>
+</pre>
     </div>
   </div>
   
@@ -2787,6 +3936,14 @@ <h2>Try/Catch/Finally</h2>
 finally
   cleanUp()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">try</span>
+  <span class="cm-variable">allHellBreaksLoose</span><span class="cm-punctuation">()</span>
+  <span class="cm-variable">catsAndDogsLivingTogether</span><span class="cm-punctuation">()</span>
+<span class="cm-keyword">catch</span> <span class="cm-variable">error</span>
+  <span class="cm-variable">print</span> <span class="cm-variable">error</span>
+<span class="cm-keyword">finally</span>
+  <span class="cm-variable">cleanUp</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="try-js">var error;
@@ -2801,6 +3958,18 @@ <h2>Try/Catch/Finally</h2>
   cleanUp();
 }
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">error</span>;
+
+<span class="cm-keyword">try</span> {
+  <span class="cm-variable">allHellBreaksLoose</span>();
+  <span class="cm-variable">catsAndDogsLivingTogether</span>();
+} <span class="cm-keyword">catch</span> (<span class="cm-def">error1</span>) {
+  <span class="cm-variable">error</span> <span class="cm-operator">=</span> <span class="cm-variable-2">error1</span>;
+  <span class="cm-variable">print</span>(<span class="cm-variable">error</span>);
+} <span class="cm-keyword">finally</span> {
+  <span class="cm-variable">cleanUp</span>();
+}
+</pre>
     </div>
   </div>
   
@@ -2817,6 +3986,10 @@ <h2>Chained Comparisons</h2>
 
 healthy = 200 > cholesterol > 60
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">cholesterol</span> <span class="cm-punctuation">=</span> <span class="cm-number">127</span>
+
+<span class="cm-variable">healthy</span> <span class="cm-punctuation">=</span> <span class="cm-number">200</span> <span class="cm-operator">></span> <span class="cm-variable">cholesterol</span> <span class="cm-operator">></span> <span class="cm-number">60</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="comparisons-js">var cholesterol, healthy;
@@ -2825,12 +3998,21 @@ <h2>Chained Comparisons</h2>
 
 healthy = (200 > cholesterol && cholesterol > 60);
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">cholesterol</span>, <span class="cm-def">healthy</span>;
+
+<span class="cm-variable">cholesterol</span> <span class="cm-operator">=</span> <span class="cm-number">127</span>;
+
+<span class="cm-variable">healthy</span> <span class="cm-operator">=</span> (<span class="cm-number">200</span> <span class="cm-operator">></span> <span class="cm-variable">cholesterol</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">cholesterol</span> <span class="cm-operator">></span> <span class="cm-number">60</span>);
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="comparisons" data-run="healthy"><small>▶</small>&ensp;healthy</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="comparisons" data-run="healthy"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>healthy</button>
     </div>
   </div>
   
@@ -2850,6 +4032,13 @@ <h2>Block Regular Expressions</h2>
   ^ \d*\.?\d+ (?:e[+-]?\d+)?  # decimal
 ///i
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">NUMBER</span>     <span class="cm-punctuation">=</span> <span class="cm-string-2">///</span>
+<span class="cm-indent">  </span><span class="cm-operator">^</span> <span class="cm-number">0</span><span class="cm-variable">b</span><span class="cm-punctuation">[</span><span class="cm-error">0</span><span class="cm-number">1</span><span class="cm-punctuation">]</span><span class="cm-operator">+</span>    <span class="cm-operator">|</span>              <span class="cm-comment"># binary</span>
+  <span class="cm-operator">^</span> <span class="cm-number">0</span><span class="cm-variable">o</span><span class="cm-punctuation">[</span><span class="cm-number">0-7</span><span class="cm-punctuation">]</span><span class="cm-operator">+</span>   <span class="cm-operator">|</span>              <span class="cm-comment"># octal</span>
+  <span class="cm-operator">^</span> <span class="cm-error">0</span><span class="cm-variable">x</span><span class="cm-punctuation">[</span><span class="cm-error">\</span><span class="cm-variable">da</span><span class="cm-operator">-</span><span class="cm-variable">f</span><span class="cm-punctuation">]</span><span class="cm-operator">+</span> <span class="cm-operator">|</span>              <span class="cm-comment"># hex</span>
+  <span class="cm-operator">^</span> <span class="cm-error">\</span><span class="cm-variable">d</span><span class="cm-operator">*</span><span class="cm-error">\</span><span class="cm-punctuation">.</span><span class="cm-operator">?</span><span class="cm-error">\</span><span class="cm-variable">d</span><span class="cm-operator">+</span> <span class="cm-punctuation">(</span><span class="cm-operator">?</span><span class="cm-punctuation">:</span><span class="cm-variable">e</span><span class="cm-punctuation">[</span><span class="cm-operator">+-</span><span class="cm-punctuation">]</span><span class="cm-operator">?</span><span class="cm-error">\</span><span class="cm-variable">d</span><span class="cm-operator">+</span><span class="cm-punctuation">)</span><span class="cm-operator">?</span>  <span class="cm-comment"># decimal</span>
+<span class="cm-string-2">///i</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="heregexes-js">var NUMBER;
@@ -2859,6 +4048,13 @@ <h2>Block Regular Expressions</h2>
 // hex
 // decimal
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">NUMBER</span>;
+
+<span class="cm-variable">NUMBER</span> <span class="cm-operator">=</span> <span class="cm-string-2">/^0b[01]+|^0o[0-7]+|^0x[\da-f]+|^\d*\.?\d+(?:e[+-]?\d+)?/i</span>; <span class="cm-comment">// binary</span>
+<span class="cm-comment">// octal</span>
+<span class="cm-comment">// hex</span>
+<span class="cm-comment">// decimal</span>
+</pre>
     </div>
   </div>
   
@@ -2880,6 +4076,15 @@ <h2>Tagged Template Literals</h2>
                Hi #{name}. You look #{adjective}!
                """
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">upperCaseExpr</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">textParts</span><span class="cm-punctuation">,</span> <span class="cm-variable">expressions</span><span class="cm-punctuation">...)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">textParts</span><span class="cm-punctuation">.</span><span class="cm-property">reduce</span> <span class="cm-punctuation">(</span><span class="cm-variable">text</span><span class="cm-punctuation">,</span> <span class="cm-variable">textPart</span><span class="cm-punctuation">,</span> <span class="cm-variable">i</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-variable">text</span> <span class="cm-operator">+</span> <span class="cm-variable">expressions</span><span class="cm-punctuation">[</span><span class="cm-variable">i</span> <span class="cm-operator">-</span> <span class="cm-number">1</span><span class="cm-punctuation">].</span><span class="cm-property">toUpperCase</span><span class="cm-punctuation">()</span> <span class="cm-operator">+</span> <span class="cm-variable">textPart</span>
+
+<span class="cm-variable">greet</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">name</span><span class="cm-punctuation">,</span> <span class="cm-variable">adjective</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">upperCaseExpr</span><span class="cm-string">"""</span>
+<span class="cm-string">               Hi #{name}. You look #{adjective}!</span>
+<span class="cm-string">               """</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="tagged_template_literals-js">var greet, upperCaseExpr;
@@ -2894,12 +4099,27 @@ <h2>Tagged Template Literals</h2>
   return upperCaseExpr`Hi ${name}. You look ${adjective}!`;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">greet</span>, <span class="cm-def">upperCaseExpr</span>;
+
+<span class="cm-variable">upperCaseExpr</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">textParts</span>, <span class="cm-meta">...</span><span class="cm-def">expressions</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">textParts</span>.<span class="cm-property">reduce</span>(<span class="cm-keyword">function</span>(<span class="cm-def">text</span>, <span class="cm-def">textPart</span>, <span class="cm-def">i</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-variable-2">text</span> <span class="cm-operator">+</span> <span class="cm-variable-2">expressions</span>[<span class="cm-variable-2">i</span> <span class="cm-operator">-</span> <span class="cm-number">1</span>].<span class="cm-property">toUpperCase</span>() <span class="cm-operator">+</span> <span class="cm-variable-2">textPart</span>;
+  });
+};
+
+<span class="cm-variable">greet</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">name</span>, <span class="cm-def">adjective</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable">upperCaseExpr</span><span class="cm-string-2">`Hi ${</span><span class="cm-variable-2">name</span><span class="cm-string-2">}. You look ${</span><span class="cm-variable-2">adjective</span><span class="cm-string-2">}!`</span>;
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="tagged_template_literals" data-run="greet%28%22greg%22%2C%20%22awesome%22%29"><small>▶</small>&ensp;greet(&quot;greg&quot;, &quot;awesome&quot;)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="tagged_template_literals" data-run="greet%28%22greg%22%2C%20%22awesome%22%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>greet(&quot;greg&quot;, &quot;awesome&quot;)</button>
     </div>
   </div>
   
@@ -2935,6 +4155,29 @@ <h2>Modules</h2>
 export * from 'underscore'
 export { max, min } from 'underscore'
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">import</span> <span class="cm-string">'local-file.coffee'</span>
+<span class="cm-variable">import</span> <span class="cm-string">'coffeescript'</span>
+
+<span class="cm-variable">import</span> <span class="cm-variable">_</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+<span class="cm-variable">import</span> <span class="cm-operator">*</span> <span class="cm-variable">as</span> <span class="cm-variable">underscore</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+
+<span class="cm-variable">import</span> <span class="cm-punctuation">{</span> <span class="cm-variable">now</span> <span class="cm-punctuation">}</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+<span class="cm-variable">import</span> <span class="cm-punctuation">{</span> <span class="cm-variable">now</span> <span class="cm-variable">as</span> <span class="cm-variable">currentTimestamp</span> <span class="cm-punctuation">}</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+<span class="cm-variable">import</span> <span class="cm-punctuation">{</span> <span class="cm-variable">first</span><span class="cm-punctuation">,</span> <span class="cm-variable">last</span> <span class="cm-punctuation">}</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+<span class="cm-variable">import</span> <span class="cm-variable">utilityBelt</span><span class="cm-punctuation">,</span> <span class="cm-punctuation">{</span> <span class="cm-variable">each</span> <span class="cm-punctuation">}</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+
+<span class="cm-variable">export</span> <span class="cm-variable">default</span> <span class="cm-variable">Math</span>
+<span class="cm-variable">export</span> <span class="cm-variable">square</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">x</span> <span class="cm-operator">*</span> <span class="cm-variable">x</span>
+<span class="cm-variable">export</span> <span class="cm-keyword">class</span> <span class="cm-variable">Mathematics</span>
+  <span class="cm-variable">least</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-variable">x</span><span class="cm-punctuation">,</span> <span class="cm-variable">y</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-keyword">if</span> <span class="cm-variable">x</span> <span class="cm-operator">&lt;</span> <span class="cm-variable">y</span> <span class="cm-keyword">then</span> <span class="cm-variable">x</span> <span class="cm-keyword">else</span> <span class="cm-variable">y</span>
+
+<span class="cm-variable">export</span> <span class="cm-punctuation">{</span> <span class="cm-variable">sqrt</span> <span class="cm-punctuation">}</span>
+<span class="cm-variable">export</span> <span class="cm-punctuation">{</span> <span class="cm-variable">sqrt</span> <span class="cm-variable">as</span> <span class="cm-variable">squareRoot</span> <span class="cm-punctuation">}</span>
+<span class="cm-variable">export</span> <span class="cm-punctuation">{</span> <span class="cm-variable">Mathematics</span> <span class="cm-variable">as</span> <span class="cm-variable">default</span><span class="cm-punctuation">,</span> <span class="cm-variable">sqrt</span> <span class="cm-variable">as</span> <span class="cm-variable">squareRoot</span> <span class="cm-punctuation">}</span>
+
+<span class="cm-variable">export</span> <span class="cm-operator">*</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+<span class="cm-variable">export</span> <span class="cm-punctuation">{</span> <span class="cm-variable">max</span><span class="cm-punctuation">,</span> <span class="cm-variable">min</span> <span class="cm-punctuation">}</span> <span class="cm-variable">from</span> <span class="cm-string">'underscore'</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="modules-js">import 'local-file.coffee';
@@ -2999,6 +4242,68 @@ <h2>Modules</h2>
   min
 } from 'underscore';
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">import</span> <span class="cm-string">'local-file.coffee'</span>;
+
+<span class="cm-keyword">import</span> <span class="cm-string">'coffeescript'</span>;
+
+<span class="cm-keyword">import</span> <span class="cm-def">_</span> <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">import</span> <span class="cm-keyword">*</span> <span class="cm-keyword">as</span> <span class="cm-def">underscore</span> <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">import</span> {
+  <span class="cm-def">now</span>
+} <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">import</span> {
+  <span class="cm-def">now</span> <span class="cm-keyword">as</span> <span class="cm-def">currentTimestamp</span>
+} <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">import</span> {
+  <span class="cm-def">first</span>,
+  <span class="cm-def">last</span>
+} <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">import</span> <span class="cm-def">utilityBelt</span>, {
+  <span class="cm-def">each</span>
+} <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">export</span> <span class="cm-keyword">default</span> <span class="cm-variable">Math</span>;
+
+<span class="cm-keyword">export</span> <span class="cm-keyword">var</span> <span class="cm-def">square</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">x</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span> <span class="cm-operator">*</span> <span class="cm-variable-2">x</span>;
+};
+
+<span class="cm-keyword">export</span> <span class="cm-keyword">var</span> <span class="cm-def">Mathematics</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">Mathematics</span> {
+  <span class="cm-property">least</span>(<span class="cm-def">x</span>, <span class="cm-def">y</span>) {
+    <span class="cm-keyword">if</span> (<span class="cm-variable-2">x</span> <span class="cm-operator">&lt;</span> <span class="cm-variable-2">y</span>) {
+      <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span>;
+    } <span class="cm-keyword">else</span> {
+      <span class="cm-keyword">return</span> <span class="cm-variable-2">y</span>;
+    }
+  }
+
+};
+
+<span class="cm-keyword">export</span> {
+  <span class="cm-variable">sqrt</span>
+};
+
+<span class="cm-keyword">export</span> {
+  <span class="cm-variable">sqrt</span> <span class="cm-keyword">as</span> <span class="cm-variable">squareRoot</span>
+};
+
+<span class="cm-keyword">export</span> {
+  <span class="cm-variable">Mathematics</span> <span class="cm-keyword">as</span> <span class="cm-keyword">default</span>,
+  <span class="cm-variable">sqrt</span> <span class="cm-variable">as</span> <span class="cm-variable">squareRoot</span>
+};
+
+<span class="cm-keyword">export</span> <span class="cm-keyword">*</span> <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+
+<span class="cm-keyword">export</span> {
+  <span class="cm-variable">max</span>,
+  <span class="cm-variable">min</span>
+} <span class="cm-keyword">from</span> <span class="cm-string">'underscore'</span>;
+</pre>
     </div>
   </div>
   
@@ -3018,6 +4323,10 @@ <h2>Embedded JavaScript</h2>
   return [document.title, "Hello JavaScript"].join(": ");
 }`
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">hi</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">`</span><span class="cm-variable">function</span><span class="cm-punctuation">()</span> <span class="cm-punctuation">{</span>
+  <span class="cm-keyword">return</span> <span class="cm-punctuation">[</span><span class="cm-variable">document</span><span class="cm-punctuation">.</span><span class="cm-property">title</span><span class="cm-punctuation">,</span> <span class="cm-string">"Hello JavaScript"</span><span class="cm-punctuation">].</span><span class="cm-property">join</span><span class="cm-punctuation">(</span><span class="cm-string">": "</span><span class="cm-punctuation">);</span>
+<span class="cm-punctuation">}`</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="embedded-js">var hi;
@@ -3026,12 +4335,21 @@ <h2>Embedded JavaScript</h2>
   return [document.title, "Hello JavaScript"].join(": ");
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">hi</span>;
+
+<span class="cm-variable">hi</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">return</span> [<span class="cm-variable">document</span>.<span class="cm-property">title</span>, <span class="cm-string">"Hello JavaScript"</span>].<span class="cm-property">join</span>(<span class="cm-string">": "</span>);
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded" data-run="hi%28%29"><small>▶</small>&ensp;hi()</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded" data-run="hi%28%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>hi()</button>
     </div>
   </div>
   
@@ -3045,6 +4363,10 @@ <h2>Embedded JavaScript</h2>
   return \`In Markdown, write code like \\\`this\\\`\`;
 }`
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">markdown</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">`</span><span class="cm-variable">function</span> <span class="cm-punctuation">()</span> <span class="cm-punctuation">{</span>
+  <span class="cm-keyword">return</span> <span class="cm-error">\</span><span class="cm-punctuation">`</span><span class="cm-variable">In</span> <span class="cm-variable">Markdown</span><span class="cm-punctuation">,</span> <span class="cm-variable">write</span> <span class="cm-variable">code</span> <span class="cm-variable">like</span> <span class="cm-error">\\\</span><span class="cm-punctuation">`</span><span class="cm-keyword">this</span><span class="cm-error">\\\</span><span class="cm-punctuation">`</span><span class="cm-error">\</span><span class="cm-punctuation">`;</span>
+<span class="cm-punctuation">}`</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="embedded_escaped-js">var markdown;
@@ -3053,12 +4375,21 @@ <h2>Embedded JavaScript</h2>
   return `In Markdown, write code like \`this\``;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">markdown</span>;
+
+<span class="cm-variable">markdown</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span> () {
+  <span class="cm-keyword">return</span> <span class="cm-string-2">`In Markdown, write code like \`this\``</span>;
+};
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded_escaped" data-run="markdown%28%29"><small>▶</small>&ensp;markdown()</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded_escaped" data-run="markdown%28%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>markdown()</button>
     </div>
   </div>
   
@@ -3073,6 +4404,12 @@ <h2>Embedded JavaScript</h2>
 }
 ```
 </textarea>
+      <pre class="placeholder-code"><span class="cm-punctuation">```</span>
+<span class="cm-variable">function</span> <span class="cm-variable">time</span><span class="cm-punctuation">()</span> <span class="cm-punctuation">{</span>
+  <span class="cm-keyword">return</span> <span class="cm-punctuation">`</span><span class="cm-variable">The</span> <span class="cm-variable">time</span> <span class="cm-operator">is</span> <span class="cm-variable">$</span><span class="cm-punctuation">{</span><span class="cm-keyword">new</span> <span class="cm-variable">Date</span><span class="cm-punctuation">().</span><span class="cm-property">toLocaleTimeString</span><span class="cm-punctuation">()}`;</span>
+<span class="cm-punctuation">}</span>
+<span class="cm-punctuation">```</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="embedded_block-js">
@@ -3082,12 +4419,22 @@ <h2>Embedded JavaScript</h2>
 ;
 
 </textarea>
+      <pre class="placeholder-code">
+<span class="cm-keyword">function</span> <span class="cm-def">time</span>() {
+  <span class="cm-keyword">return</span> <span class="cm-string-2">`The time is ${</span><span class="cm-keyword">new</span> <span class="cm-variable">Date</span>().<span class="cm-property">toLocaleTimeString</span>()<span class="cm-string-2">}`</span>;
+}
+;
+
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded_block" data-run="time%28%29"><small>▶</small>&ensp;time()</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="embedded_block" data-run="time%28%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>time()</button>
     </div>
   </div>
   
@@ -3112,6 +4459,16 @@ <h2>JSX</h2>
       <Star className="emptyStar" key={emptyStar} />}
   </aside>
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">renderStarRating</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">({</span> <span class="cm-variable">rating</span><span class="cm-punctuation">,</span> <span class="cm-variable">maxStars</span> <span class="cm-punctuation">})</span> <span class="cm-operator">-></span>
+  <span class="cm-operator">&lt;</span><span class="cm-variable">aside</span> <span class="cm-variable">title</span><span class="cm-punctuation">={</span><span class="cm-string">"Rating: #{rating} of #{maxStars} stars"</span><span class="cm-punctuation">}</span><span class="cm-operator">></span>
+<span class="cm-indent">    </span><span class="cm-punctuation">{</span><span class="cm-keyword">for</span> <span class="cm-variable">wholeStar</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-number">0</span><span class="cm-punctuation">...</span><span class="cm-variable">Math</span><span class="cm-punctuation">.</span><span class="cm-property">floor</span><span class="cm-punctuation">(</span><span class="cm-variable">rating</span><span class="cm-punctuation">)]</span>
+<span class="cm-dedent">      </span><span class="cm-operator">&lt;</span><span class="cm-variable">Star</span> <span class="cm-variable">className</span><span class="cm-punctuation">=</span><span class="cm-string">"wholeStar"</span> <span class="cm-variable">key</span><span class="cm-punctuation">={</span><span class="cm-variable">wholeStar</span><span class="cm-punctuation">}</span> <span class="cm-operator">/></span><span class="cm-punctuation">}</span>
+    <span class="cm-punctuation">{</span><span class="cm-keyword">if</span> <span class="cm-variable">rating</span> <span class="cm-operator">%</span> <span class="cm-number">1</span> <span class="cm-operator">isnt</span> <span class="cm-number">0</span>
+<span class="cm-dedent">      </span><span class="cm-operator">&lt;</span><span class="cm-variable">Star</span> <span class="cm-variable">className</span><span class="cm-punctuation">=</span><span class="cm-string">"halfStar"</span> <span class="cm-operator">/></span><span class="cm-punctuation">}</span>
+    <span class="cm-punctuation">{</span><span class="cm-keyword">for</span> <span class="cm-variable">emptyStar</span> <span class="cm-operator">in</span> <span class="cm-punctuation">[</span><span class="cm-variable">Math</span><span class="cm-punctuation">.</span><span class="cm-property">ceil</span><span class="cm-punctuation">(</span><span class="cm-variable">rating</span><span class="cm-punctuation">)...</span><span class="cm-variable">maxStars</span><span class="cm-punctuation">]</span>
+<span class="cm-dedent">      </span><span class="cm-operator">&lt;</span><span class="cm-variable">Star</span> <span class="cm-variable">className</span><span class="cm-punctuation">=</span><span class="cm-string">"emptyStar"</span> <span class="cm-variable">key</span><span class="cm-punctuation">={</span><span class="cm-variable">emptyStar</span><span class="cm-punctuation">}</span> <span class="cm-operator">/></span><span class="cm-punctuation">}</span>
+<span class="cm-dedent">  </span><span class="cm-operator">&lt;/</span><span class="cm-variable">aside</span><span class="cm-operator">></span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="jsx-js">var renderStarRating;
@@ -3139,6 +4496,31 @@ <h2>JSX</h2>
   </aside>;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">renderStarRating</span>;
+
+<span class="cm-variable">renderStarRating</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>({<span class="cm-def">rating</span>, <span class="cm-def">maxStars</span>}) {
+  <span class="cm-keyword">var</span> <span class="cm-def">emptyStar</span>, <span class="cm-def">wholeStar</span>;
+  <span class="cm-keyword">return</span> <span class="cm-operator">&lt;</span><span class="cm-variable">aside</span> <span class="cm-variable">title</span><span class="cm-operator">=</span>{<span class="cm-string-2">`Rating: ${</span><span class="cm-variable-2">rating</span>} <span class="cm-variable">of</span> <span class="cm-variable">$</span>{<span class="cm-variable-2">maxStars</span>} <span class="cm-variable">stars</span><span class="cm-string-2">`}></span>
+    <span class="cm-string-2">{(function() {</span>
+    <span class="cm-string-2">var i, ref, results;</span>
+    <span class="cm-string-2">results = [];</span>
+    <span class="cm-string-2">for (wholeStar = i = 0, ref = Math.floor(rating); 0 &lt;= ref ? i &lt; ref : i > ref; wholeStar = 0 &lt;= ref ? ++i : --i) {</span>
+      <span class="cm-string-2">results.push(&lt;Star className="wholeStar" key={wholeStar} />);</span>
+    <span class="cm-string-2">}</span>
+    <span class="cm-string-2">return results;</span>
+  <span class="cm-string-2">})()}</span>
+    <span class="cm-string-2">{(rating % 1 !== 0 ? &lt;Star className="halfStar" /> : void 0)}</span>
+    <span class="cm-string-2">{(function() {</span>
+    <span class="cm-string-2">var i, ref, ref1, results;</span>
+    <span class="cm-string-2">results = [];</span>
+    <span class="cm-string-2">for (emptyStar = i = ref = Math.ceil(rating), ref1 = maxStars; ref &lt;= ref1 ? i &lt; ref1 : i > ref1; emptyStar = ref &lt;= ref1 ? ++i : --i) {</span>
+      <span class="cm-string-2">results.push(&lt;Star className="emptyStar" key={emptyStar} />);</span>
+    <span class="cm-string-2">}</span>
+    <span class="cm-string-2">return results;</span>
+  <span class="cm-string-2">})()}</span>
+  <span class="cm-string-2">&lt;/aside>;</span>
+<span class="cm-string-2">};</span>
+</pre>
     </div>
   </div>
   
@@ -3158,6 +4540,11 @@ <h2>Type Annotations</h2>
 fn = (str ###: string ###, num ###: number ###) ###: string ### ->
   str + num
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># @flow</span>
+
+<span class="cm-variable">fn</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">str</span> <span class="cm-comment">###: string ###</span><span class="cm-punctuation">,</span> <span class="cm-variable">num</span> <span class="cm-comment">###: number ###</span><span class="cm-punctuation">)</span> <span class="cm-comment">###: string ###</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">str</span> <span class="cm-operator">+</span> <span class="cm-variable">num</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="type_annotations-js">// @flow
@@ -3167,6 +4554,13 @@ <h2>Type Annotations</h2>
   return str + num;
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// @flow</span>
+<span class="cm-keyword">var</span> <span class="cm-def">fn</span>;
+
+<span class="cm-variable">fn</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">str</span><span class="cm-comment">/*: string */</span>, <span class="cm-def">num</span><span class="cm-comment">/*: number */</span>)<span class="cm-comment">/*: string */</span> {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">str</span> <span class="cm-operator">+</span> <span class="cm-variable-2">num</span>;
+};
+</pre>
     </div>
   </div>
   
@@ -3213,6 +4607,16 @@ <h2>Cake, and Cakefiles</h2>
   dir  = options.output or 'lib'
   fs.writeFile "#{dir}/parser.js", code
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">fs</span> <span class="cm-punctuation">=</span> <span class="cm-variable">require</span> <span class="cm-string">'fs'</span>
+
+<span class="cm-variable">option</span> <span class="cm-string">'-o'</span><span class="cm-punctuation">,</span> <span class="cm-string">'--output [DIR]'</span><span class="cm-punctuation">,</span> <span class="cm-string">'directory for compiled code'</span>
+
+<span class="cm-variable">task</span> <span class="cm-string">'build:parser'</span><span class="cm-punctuation">,</span> <span class="cm-string">'rebuild the Jison parser'</span><span class="cm-punctuation">,</span> <span class="cm-punctuation">(</span><span class="cm-variable">options</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">require</span> <span class="cm-string">'jison'</span>
+  <span class="cm-variable">code</span> <span class="cm-punctuation">=</span> <span class="cm-variable">require</span><span class="cm-punctuation">(</span><span class="cm-string">'./lib/grammar'</span><span class="cm-punctuation">).</span><span class="cm-property">parser</span><span class="cm-punctuation">.</span><span class="cm-property">generate</span><span class="cm-punctuation">()</span>
+  <span class="cm-variable">dir</span>  <span class="cm-punctuation">=</span> <span class="cm-variable">options</span><span class="cm-punctuation">.</span><span class="cm-property">output</span> <span class="cm-operator">or</span> <span class="cm-string">'lib'</span>
+  <span class="cm-variable">fs</span><span class="cm-punctuation">.</span><span class="cm-property">writeFile</span> <span class="cm-string">"#{dir}/parser.js"</span><span class="cm-punctuation">,</span> <span class="cm-variable">code</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="cake_tasks-js">var fs;
@@ -3229,6 +4633,20 @@ <h2>Cake, and Cakefiles</h2>
   return fs.writeFile(`${dir}/parser.js`, code);
 });
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">fs</span>;
+
+<span class="cm-variable">fs</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>(<span class="cm-string">'fs'</span>);
+
+<span class="cm-variable">option</span>(<span class="cm-string">'-o'</span>, <span class="cm-string">'--output [DIR]'</span>, <span class="cm-string">'directory for compiled code'</span>);
+
+<span class="cm-variable">task</span>(<span class="cm-string">'build:parser'</span>, <span class="cm-string">'rebuild the Jison parser'</span>, <span class="cm-keyword">function</span>(<span class="cm-def">options</span>) {
+  <span class="cm-keyword">var</span> <span class="cm-def">code</span>, <span class="cm-def">dir</span>;
+  <span class="cm-variable">require</span>(<span class="cm-string">'jison'</span>);
+  <span class="cm-variable-2">code</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>(<span class="cm-string">'./lib/grammar'</span>).<span class="cm-property">parser</span>.<span class="cm-property">generate</span>();
+  <span class="cm-variable-2">dir</span> <span class="cm-operator">=</span> <span class="cm-variable-2">options</span>.<span class="cm-property">output</span> <span class="cm-operator">||</span> <span class="cm-string">'lib'</span>;
+  <span class="cm-keyword">return</span> <span class="cm-variable">fs</span>.<span class="cm-property">writeFile</span>(<span class="cm-string-2">`${</span><span class="cm-variable-2">dir</span><span class="cm-string-2">}/parser.js`</span>, <span class="cm-variable-2">code</span>);
+});
+</pre>
     </div>
   </div>
   
@@ -3377,6 +4795,16 @@ <h3><code>get</code> and <code>set</code> keyword shorthand syntax</h3>
   set: (val) ->
     this.width = val / this.ratio
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">screen</span> <span class="cm-punctuation">=</span>
+<span class="cm-indent">  </span><span class="cm-variable">width</span><span class="cm-punctuation">:</span> <span class="cm-number">1200</span>
+  <span class="cm-variable">ratio</span><span class="cm-punctuation">:</span> <span class="cm-number">16</span><span class="cm-operator">/</span><span class="cm-number">9</span>
+
+<span class="cm-variable">Object</span><span class="cm-punctuation">.</span><span class="cm-property">defineProperty</span> <span class="cm-variable">screen</span><span class="cm-punctuation">,</span> <span class="cm-string">'height'</span><span class="cm-punctuation">,</span>
+<span class="cm-indent">  </span><span class="cm-variable">get</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span>
+    <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">width</span> <span class="cm-operator">/</span> <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">ratio</span>
+<span class="cm-dedent">  </span><span class="cm-variable">set</span><span class="cm-punctuation">:</span> <span class="cm-punctuation">(</span><span class="cm-variable">val</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+    <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">width</span> <span class="cm-punctuation">=</span> <span class="cm-variable">val</span> <span class="cm-operator">/</span> <span class="cm-keyword">this</span><span class="cm-punctuation">.</span><span class="cm-property">ratio</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="get_set-js">var screen;
@@ -3395,12 +4823,31 @@ <h3><code>get</code> and <code>set</code> keyword shorthand syntax</h3>
   }
 });
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">screen</span>;
+
+<span class="cm-variable">screen</span> <span class="cm-operator">=</span> {
+  <span class="cm-property">width</span>: <span class="cm-number">1200</span>,
+  <span class="cm-property">ratio</span>: <span class="cm-number">16</span> <span class="cm-operator">/</span> <span class="cm-number">9</span>
+};
+
+<span class="cm-variable">Object</span>.<span class="cm-property">defineProperty</span>(<span class="cm-variable">screen</span>, <span class="cm-string">'height'</span>, {
+  <span class="cm-property">get</span>: <span class="cm-keyword">function</span>() {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">width</span> <span class="cm-operator">/</span> <span class="cm-keyword">this</span>.<span class="cm-property">ratio</span>;
+  },
+  <span class="cm-property">set</span>: <span class="cm-keyword">function</span>(<span class="cm-def">val</span>) {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">width</span> <span class="cm-operator">=</span> <span class="cm-variable-2">val</span> <span class="cm-operator">/</span> <span class="cm-keyword">this</span>.<span class="cm-property">ratio</span>;
+  }
+});
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="get_set" data-run="screen.height"><small>▶</small>&ensp;screen.height</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="get_set" data-run="screen.height"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>screen.height</button>
     </div>
   </div>
   
@@ -3424,6 +4871,12 @@ <h3>Bound (fat arrow) functions</h3>
 
 outer(1, 2)  # Returns '' in CoffeeScript 1.x, '1, 2' in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">outer</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">inner</span> <span class="cm-punctuation">=</span> <span class="cm-operator">=></span> <span class="cm-variable">Array</span><span class="cm-punctuation">.</span><span class="cm-property">from</span> <span class="cm-variable">arguments</span>
+  <span class="cm-variable">inner</span><span class="cm-punctuation">()</span>
+
+<span class="cm-variable">outer</span><span class="cm-punctuation">(</span><span class="cm-number">1</span><span class="cm-punctuation">,</span> <span class="cm-number">2</span><span class="cm-punctuation">)</span>  <span class="cm-comment"># Returns '' in CoffeeScript 1.x, '1, 2' in CoffeeScript 2</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_fat_arrow-js">var outer;
@@ -3438,12 +4891,27 @@ <h3>Bound (fat arrow) functions</h3>
 
 outer(1, 2); // Returns '' in CoffeeScript 1.x, '1, 2' in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">outer</span>;
+
+<span class="cm-variable">outer</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">var</span> <span class="cm-def">inner</span>;
+  <span class="cm-variable-2">inner</span> <span class="cm-operator">=</span> () <span class="cm-operator">=></span> {
+    <span class="cm-keyword">return</span> <span class="cm-variable">Array</span>.<span class="cm-property">from</span>(<span class="cm-variable-2">arguments</span>);
+  };
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">inner</span>();
+};
+
+<span class="cm-variable">outer</span>(<span class="cm-number">1</span>, <span class="cm-number">2</span>); <span class="cm-comment">// Returns '' in CoffeeScript 1.x, '1, 2' in CoffeeScript 2</span>
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_fat_arrow" data-run="outer%281%2C%202%29"><small>▶</small>&ensp;outer(1, 2)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_fat_arrow" data-run="outer%281%2C%202%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>outer(1, 2)</button>
     </div>
   </div>
   
@@ -3460,6 +4928,10 @@ <h3>Default values for function parameters and destructured elements</h3>
 
 f(null)  # Returns 1 in CoffeeScript 1.x, null in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">f</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">a</span> <span class="cm-punctuation">=</span> <span class="cm-number">1</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span> <span class="cm-variable">a</span>
+
+<span class="cm-variable">f</span><span class="cm-punctuation">(</span><span class="cm-atom">null</span><span class="cm-punctuation">)</span>  <span class="cm-comment"># Returns 1 in CoffeeScript 1.x, null in CoffeeScript 2</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_function_parameter_default_values-js">var f;
@@ -3470,12 +4942,23 @@ <h3>Default values for function parameters and destructured elements</h3>
 
 f(null); // Returns 1 in CoffeeScript 1.x, null in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">f</span>;
+
+<span class="cm-variable">f</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>) {
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">a</span>;
+};
+
+<span class="cm-variable">f</span>(<span class="cm-atom">null</span>); <span class="cm-comment">// Returns 1 in CoffeeScript 1.x, null in CoffeeScript 2</span>
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_function_parameter_default_values" data-run="f%28null%29"><small>▶</small>&ensp;f(null)</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_function_parameter_default_values" data-run="f%28null%29"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>f(null)</button>
     </div>
   </div>
   
@@ -3487,6 +4970,10 @@ <h3>Default values for function parameters and destructured elements</h3>
 
 a  # Equals 1 in CoffeeScript 1.x, null in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-punctuation">{</span><span class="cm-variable">a</span> <span class="cm-punctuation">=</span> <span class="cm-number">1</span><span class="cm-punctuation">}</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">{</span><span class="cm-variable">a</span><span class="cm-punctuation">:</span> <span class="cm-atom">null</span><span class="cm-punctuation">}</span>
+
+<span class="cm-variable">a</span>  <span class="cm-comment"># Equals 1 in CoffeeScript 1.x, null in CoffeeScript 2</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_destructuring_default_values-js">var a;
@@ -3497,12 +4984,23 @@ <h3>Default values for function parameters and destructured elements</h3>
 
 a; // Equals 1 in CoffeeScript 1.x, null in CoffeeScript 2
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">a</span>;
+
+({<span class="cm-property">a</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>} <span class="cm-operator">=</span> {
+  <span class="cm-property">a</span>: <span class="cm-atom">null</span>
+});
+
+<span class="cm-variable">a</span>; <span class="cm-comment">// Equals 1 in CoffeeScript 1.x, null in CoffeeScript 2</span>
+</pre>
     </div>
   </div>
   
   <div class="row">
     <div class="col text-right">
-      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_destructuring_default_values" data-run="a"><small>▶</small>&ensp;a</button>
+      <button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_destructuring_default_values" data-run="a"><small><svg class="play-button" viewBox="0 0 24 24">
+  <path d="M2.56-0.01v24.02L21.44 11.98 2.56-0.01z"/>
+</svg>
+</small>a</button>
     </div>
   </div>
   
@@ -3522,6 +5020,9 @@ <h3>Bound generator functions</h3>
       <textarea class="coffeescript-input" id="breaking_change_bound_generator_function-coffee">self = this
 f = -> yield self
 </textarea>
+      <pre class="placeholder-code"><span class="cm-variable">self</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">this</span>
+<span class="cm-variable">f</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span> <span class="cm-variable">yield</span> <span class="cm-variable">self</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_bound_generator_function-js">var f, self;
@@ -3532,6 +5033,14 @@ <h3>Bound generator functions</h3>
   return (yield self);
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">f</span>, <span class="cm-def">self</span>;
+
+<span class="cm-variable">self</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>;
+
+<span class="cm-variable">f</span> <span class="cm-operator">=</span> <span class="cm-keyword">function*</span>() {
+  <span class="cm-keyword">return</span> (<span class="cm-keyword">yield</span> <span class="cm-variable">self</span>);
+};
+</pre>
     </div>
   </div>
   
@@ -3587,6 +5096,9 @@ <h3><code>super</code> and <code>extends</code></h3>
       <textarea class="coffeescript-input" id="breaking_change_super_with_arguments-coffee">class B extends A
   foo: -> super arguments...
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span>
+  <span class="cm-variable">foo</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span> <span class="cm-variable">super</span> <span class="cm-variable">arguments</span><span class="cm-punctuation">...</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_super_with_arguments-js">var B;
@@ -3598,6 +5110,15 @@ <h3><code>super</code> and <code>extends</code></h3>
 
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">B</span>;
+
+<span class="cm-variable">B</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span> {
+  <span class="cm-property">foo</span>() {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">super</span>.<span class="cm-property">foo</span>(<span class="cm-meta">...</span><span class="cm-variable-2">arguments</span>);
+  }
+
+};
+</pre>
     </div>
   </div>
   
@@ -3609,6 +5130,9 @@ <h3><code>super</code> and <code>extends</code></h3>
       <textarea class="coffeescript-input" id="breaking_change_super_without_arguments-coffee">class B extends A
   foo: -> super()
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span>
+  <span class="cm-variable">foo</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span> <span class="cm-variable">super</span><span class="cm-punctuation">()</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_super_without_arguments-js">var B;
@@ -3620,6 +5144,15 @@ <h3><code>super</code> and <code>extends</code></h3>
 
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">B</span>;
+
+<span class="cm-variable">B</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span> {
+  <span class="cm-property">foo</span>() {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">super</span>.<span class="cm-property">foo</span>();
+  }
+
+};
+</pre>
     </div>
   </div>
   
@@ -3654,6 +5187,25 @@ <h3><code>super</code> and <code>extends</code></h3>
 extend B, A
 B.prototype.foo = -> A::foo.apply this, arguments
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment"># Helper functions</span>
+<span class="cm-variable">hasProp</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">{}.</span><span class="cm-property">hasOwnProperty</span>
+<span class="cm-variable">extend</span> <span class="cm-punctuation">=</span> <span class="cm-punctuation">(</span><span class="cm-variable">child</span><span class="cm-punctuation">,</span> <span class="cm-variable">parent</span><span class="cm-punctuation">)</span> <span class="cm-operator">-></span>
+  <span class="cm-variable">ctor</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+    <span class="cm-property">@constructor</span> <span class="cm-punctuation">=</span> <span class="cm-variable">child</span>
+    <span class="cm-keyword">return</span>
+  <span class="cm-keyword">for</span> <span class="cm-variable">key</span> <span class="cm-keyword">of</span> <span class="cm-variable">parent</span>
+    <span class="cm-keyword">if</span> <span class="cm-variable">hasProp</span><span class="cm-punctuation">.</span><span class="cm-property">call</span><span class="cm-punctuation">(</span><span class="cm-variable">parent</span><span class="cm-punctuation">,</span> <span class="cm-variable">key</span><span class="cm-punctuation">)</span>
+      <span class="cm-variable">child</span><span class="cm-punctuation">[</span><span class="cm-variable">key</span><span class="cm-punctuation">]</span> <span class="cm-punctuation">=</span> <span class="cm-variable">parent</span><span class="cm-punctuation">[</span><span class="cm-variable">key</span><span class="cm-punctuation">]</span>
+<span class="cm-dedent">  </span><span class="cm-variable">ctor</span><span class="cm-punctuation">.</span><span class="cm-property">prototype</span> <span class="cm-punctuation">=</span> <span class="cm-variable">parent</span><span class="cm-punctuation">.</span><span class="cm-property">prototype</span>
+  <span class="cm-variable">child</span><span class="cm-punctuation">.</span><span class="cm-property">prototype</span> <span class="cm-punctuation">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">ctor</span>
+  <span class="cm-variable">child</span>
+
+
+<span class="cm-variable">A</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+<span class="cm-variable">B</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span>
+<span class="cm-variable">extend</span> <span class="cm-variable">B</span><span class="cm-punctuation">,</span> <span class="cm-variable">A</span>
+<span class="cm-variable">B</span><span class="cm-punctuation">.</span><span class="cm-property">prototype</span><span class="cm-punctuation">.</span><span class="cm-property">foo</span> <span class="cm-punctuation">=</span> <span class="cm-operator">-></span> <span class="cm-variable">A</span><span class="cm-punctuation">::</span><span class="cm-variable">foo</span><span class="cm-punctuation">.</span><span class="cm-property">apply</span> <span class="cm-keyword">this</span><span class="cm-punctuation">,</span> <span class="cm-variable">arguments</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_super_in_non-class_methods_refactor_with_apply-js">// Helper functions
@@ -3686,6 +5238,36 @@ <h3><code>super</code> and <code>extends</code></h3>
   return A.prototype.foo.apply(this, arguments);
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-comment">// Helper functions</span>
+<span class="cm-keyword">var</span> <span class="cm-def">A</span>, <span class="cm-def">B</span>, <span class="cm-def">extend</span>, <span class="cm-def">hasProp</span>;
+
+<span class="cm-variable">hasProp</span> <span class="cm-operator">=</span> {}.<span class="cm-property">hasOwnProperty</span>;
+
+<span class="cm-variable">extend</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">child</span>, <span class="cm-def">parent</span>) {
+  <span class="cm-keyword">var</span> <span class="cm-def">ctor</span>, <span class="cm-def">key</span>;
+  <span class="cm-variable-2">ctor</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+    <span class="cm-keyword">this</span>.<span class="cm-property">constructor</span> <span class="cm-operator">=</span> <span class="cm-variable-2">child</span>;
+  };
+  <span class="cm-keyword">for</span> (<span class="cm-variable-2">key</span> <span class="cm-keyword">in</span> <span class="cm-variable-2">parent</span>) {
+    <span class="cm-keyword">if</span> (<span class="cm-variable">hasProp</span>.<span class="cm-property">call</span>(<span class="cm-variable-2">parent</span>, <span class="cm-variable-2">key</span>)) {
+      <span class="cm-variable-2">child</span>[<span class="cm-variable-2">key</span>] <span class="cm-operator">=</span> <span class="cm-variable-2">parent</span>[<span class="cm-variable-2">key</span>];
+    }
+  }
+  <span class="cm-variable-2">ctor</span>.<span class="cm-property">prototype</span> <span class="cm-operator">=</span> <span class="cm-variable-2">parent</span>.<span class="cm-property">prototype</span>;
+  <span class="cm-variable-2">child</span>.<span class="cm-property">prototype</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable-2">ctor</span>;
+  <span class="cm-keyword">return</span> <span class="cm-variable-2">child</span>;
+};
+
+<span class="cm-variable">A</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {};
+
+<span class="cm-variable">B</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {};
+
+<span class="cm-variable">extend</span>(<span class="cm-variable">B</span>, <span class="cm-variable">A</span>);
+
+<span class="cm-variable">B</span>.<span class="cm-property">prototype</span>.<span class="cm-property">foo</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {
+  <span class="cm-keyword">return</span> <span class="cm-variable">A</span>.<span class="cm-property">prototype</span>.<span class="cm-property">foo</span>.<span class="cm-property">apply</span>(<span class="cm-keyword">this</span>, <span class="cm-variable-2">arguments</span>);
+};
+</pre>
     </div>
   </div>
   
@@ -3698,6 +5280,10 @@ <h3><code>super</code> and <code>extends</code></h3>
 class B extends A
   foo: -> super arguments...
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">class</span> <span class="cm-variable">A</span>
+<span class="cm-keyword">class</span> <span class="cm-variable">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span>
+  <span class="cm-variable">foo</span><span class="cm-punctuation">:</span> <span class="cm-operator">-></span> <span class="cm-variable">super</span> <span class="cm-variable">arguments</span><span class="cm-punctuation">...</span>
+</pre>
     </div>
     <div class="col-md-6 javascript-output-column">
       <textarea class="javascript-output" id="breaking_change_super_in_non-class_methods_refactor_with_class-js">var A, B;
@@ -3711,6 +5297,17 @@ <h3><code>super</code> and <code>extends</code></h3>
 
 };
 </textarea>
+      <pre class="placeholder-code"><span class="cm-keyword">var</span> <span class="cm-def">A</span>, <span class="cm-def">B</span>;
+
+<span class="cm-variable">A</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">A</span> {};
+
+<span class="cm-variable">B</span> <span class="cm-operator">=</span> <span class="cm-keyword">class</span> <span class="cm-def">B</span> <span class="cm-keyword">extends</span> <span class="cm-variable">A</span> {
+  <span class="cm-property">foo</span>() {
+    <span class="cm-keyword">return</span> <span class="cm-keyword">super</span>.<span class="cm-property">foo</span>(<span class="cm-meta">...</span><span class="cm-variable-2">arguments</span>);
+  }
+
+};
+</pre>
     </div>
   </div>
   
@@ -4419,7 +6016,6 @@ <h2 class="header">
 </h2><p>Initial CoffeeScript release.</p>
 
       </section>
-
     </main>
   </div>
 </div>
@@ -4433,137 +6029,8 @@ <h2 class="header">
 <script src="https://cdn.jsdelivr.net/combine/npm/codemirror@5.29.0/lib/codemirror.js,npm/codemirror@5.29.0/mode/coffeescript/coffeescript.js,npm/codemirror@5.29.0/addon/lint/coffeescript-lint.js,npm/codemirror@5.29.0/mode/javascript/javascript.js"></script>
 
 <script src="browser-compiler/coffeescript.js"></script>
-<script type="text/coffeescript">
-$(document).ready ->
-  # Mobile navigation
-  toggleSidebar = ->
-    $('.navbar-toggler, .row-offcanvas').toggleClass 'show'
-
-  $('[data-toggle="offcanvas"]').click toggleSidebar
-
-  $('[data-action="sidebar-nav"]').click (event) ->
-    if $('.navbar-toggler').is(':visible')
-      event.preventDefault()
-      toggleSidebar()
-      setTimeout ->
-        window.location = event.target.href
-      , 260 # Wait for the sidebar to slide away before navigating
-
-  # Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
-  # See also http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html and http://jsfiddle.net/KyleMit/v6zhz/
-  $('body').scrollspy
-    target: '#contents'
-    offset: Math.round $('main').css('padding-top').replace('px', '')
-
-  initializeScrollspyFromHash = (hash) ->
-    $("#contents a.active[href!='#{hash}']").removeClass 'show'
-
-  $(window).on 'activate.bs.scrollspy', (event, target) -> # Why `window`? https://github.com/twbs/bootstrap/issues/20086
-    # We only want one active link in the nav
-    $("#contents a.active[href!='#{target.relatedTarget}']").removeClass 'show'
-    $target = $("#contents a[href='#{target.relatedTarget}']")
-    # Update the browser address bar on scroll or navigation
-    window.history.pushState {}, $target.text(), $target.prop('href')
-
-
-  # Initialize CodeMirror for code examples; https://codemirror.net/doc/manual.html
-  editors = []
-  lastCompilationElapsedTime = 200
-  $('textarea').each (index) ->
-    $(@).data 'index', index
-    mode = if $(@).hasClass('javascript-output') then 'javascript' else 'coffeescript'
-
-    editors[index] = editor = CodeMirror.fromTextArea @,
-      mode: mode
-      theme: 'twilight'
-      indentUnit: 2
-      tabSize: 2
-      lineWrapping: on
-      lineNumbers: off
-      inputStyle: 'contenteditable'
-      readOnly: mode isnt 'coffeescript' # Can’t use 'nocursor' if we want the JavaScript to be copyable
-      viewportMargin: Infinity
-
-    # Whenever the user edits the CoffeeScript side of a code example, update the JavaScript output
-    # If the editor is Try CoffeeScript, also update the hash and save this code in localStorage
-    if mode is 'coffeescript'
-      pending = null
-      editor.on 'change', (instance, change) ->
-        clearTimeout pending
-        pending = setTimeout ->
-          lastCompilationStartTime = Date.now()
-          try
-            coffee = editor.getValue()
-            if index is 0 and $('#try').hasClass('show') # If this is the editor in Try CoffeeScript and it’s still visible
-              # Update the hash with the current code
-              link = "try:#{encodeURIComponent coffee}"
-              window.history.pushState {}, 'CoffeeScript', "#{location.href.split('#')[0]}##{link}"
-              # Save this to the user’s localStorage
-              try
-                if window.localStorage?
-                  window.localStorage.setItem 'tryCoffeeScriptCode', coffee
-              catch exception
-            output = CoffeeScript.compile coffee, bare: yes
-            lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
-          catch exception
-            output = "#{exception}"
-          editors[index + 1].setValue output
-        , lastCompilationElapsedTime
-
-      # Fix the code editors’ handling of tab-indented code
-      editor.addKeyMap
-        'Tab': (cm) ->
-          if cm.somethingSelected()
-            cm.indentSelection 'add'
-          else if /^\t/m.test cm.getValue()
-            # If any lines start with a tab, treat this as tab-indented code
-            cm.execCommand 'insertTab'
-          else
-            cm.execCommand 'insertSoftTab'
-        'Shift-Tab': (cm) ->
-          cm.indentSelection 'subtract'
-        'Enter': (cm) ->
-          cm.options.indentWithTabs = /^\t/m.test cm.getValue()
-          cm.execCommand 'newlineAndIndent'
-
-  # Handle the code example buttons
-  $('[data-action="run-code-example"]').click ->
-    run = $(@).data 'run'
-    index = $("##{$(@).data('example')}-js").data 'index'
-    js = editors[index].getValue()
-    js = "#{js}\nalert(#{unescape run});" unless run is yes
-    eval js
-
-
-  # Try CoffeeScript
-  toggleTry = (checkLocalStorage = no) ->
-    if checkLocalStorage and window.localStorage?
-      try
-        coffee = window.localStorage.getItem 'tryCoffeeScriptCode'
-        if coffee?
-          editors[0].setValue coffee
-      catch exception
-    $('#try, #try-link').toggleClass 'show'
-  closeTry = ->
-    $('#try, #try-link').removeClass 'show'
-
-  $('[data-toggle="try"]').click toggleTry
-  $('[data-close="try"]').click closeTry
-
-
-  # Configure the initial state
-  if window.location.hash?
-    if window.location.hash is '#try'
-      toggleTry yes
-    else if window.location.hash.indexOf('#try') is 0
-      editors[0].setValue decodeURIComponent window.location.hash[5..]
-      toggleTry()
-    else
-      initializeScrollspyFromHash window.location.hash
-      if window.location.hash.length > 1
-        # Initializing the code editors might’ve thrown off our vertical scroll position
-        document.getElementById(window.location.hash.slice(1).replace(/try:.*/, '')).scrollIntoView()
-
+<script>
+(function(){$(document).ready(function(){var a,b,c,d,e,f,g,h,i,j;if(i=function(){return $('.navbar-toggler, .sidebar').toggleClass('show')},$('[data-toggle="offcanvas"]').click(i),$('[data-action="sidebar-nav"]').click(function(a){if($('.navbar-toggler').is(':visible'))return a.preventDefault(),i(),setTimeout(function(){return window.location=a.target.href},260)}),$('body').scrollspy({target:'#contents',offset:Math.round($('main').css('padding-top').replace('px',''))}),e=function(a){return $('#contents a.active[href!=\''+a+'\']').removeClass('show')},$(window).on('activate.bs.scrollspy',function(a,b){var c;return $('#contents a.active[href!=\''+b.relatedTarget+'\']').removeClass('show'),c=$('#contents a[href=\''+b.relatedTarget+'\']'),window.history.pushState({},c.text(),c.prop('href'))}),h=[],c=[],g=200,$('textarea').each(function(a){return h[a]=this,$(this).data('index',a)}),d=function(a){var b,d,e,f;if(d=a.data('index'),e=a.hasClass('javascript-output')?'javascript':'coffeescript',c[d]=b=CodeMirror.fromTextArea(a[0],{mode:e,theme:'twilight',indentUnit:2,tabSize:2,lineWrapping:!0,lineNumbers:!1,inputStyle:'contenteditable',readOnly:'coffeescript'!==e,viewportMargin:2e308}),'coffeescript'===e)return f=null,b.on('change',function(){return clearTimeout(f),f=setTimeout(function(){var a,e,f,h,i;f=Date.now();try{if(a=b.getValue(),0===d&&$('#try').hasClass('show')){h='try:'+encodeURIComponent(a),window.history.pushState({},'CoffeeScript',location.href.split('#')[0]+'#'+h);try{null!=window.localStorage&&window.localStorage.setItem('tryCoffeeScriptCode',a)}catch(a){e=a}}i=CoffeeScript.compile(a,{bare:!0}),g=Math.max(200,Date.now()-f)}catch(a){e=a,i=''+e}return c[d+1].setValue(i)},g)}),b.addKeyMap({Tab:function(a){return a.somethingSelected()?a.indentSelection('add'):/^\t/m.test(a.getValue())?a.execCommand('insertTab'):a.execCommand('insertSoftTab')},"Shift-Tab":function(a){return a.indentSelection('subtract')},Enter:function(a){return a.options.indentWithTabs=/^\t/m.test(a.getValue()),a.execCommand('newlineAndIndent')}})},$('.placeholder-code').one('mouseover',function(){var a,b;return b=$(this).prev('textarea'),$(this).remove(),d(b),a=$(b.parent().siblings()[0]),a.children('.placeholder-code').remove(),d($(a.children('textarea')[0]))}),f=function(){return d($('#try-coffeescript-coffee')),d($('#try-coffeescript-js'))},$('[data-action="run-code-example"]').click(function(){var a,b,d;return d=$(this).data('run'),a=$('#'+$(this).data('example')+'-js').data('index'),b=null==c[a]?$(h[a]).val():c[a].getValue(),!0!==d&&(b=b+'\nalert('+unescape(d)+');'),eval(b)}),a=function(){return window.history.pushState('',document.title,window.location.pathname)},$(window).on('hashchange',function(){if(''===window.location.hash)return a()}),j=function(){var b,d=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(0===$('#try .CodeMirror').length&&f(),d&&null!=window.localStorage)try{b=window.localStorage.getItem('tryCoffeeScriptCode'),null!=b&&c[0].setValue(b)}catch(a){}return($('#try, #try-link').toggleClass('show'),!$('#try').hasClass('show'))?setTimeout(a,200):void 0},b=function(){return $('#try, #try-link').removeClass('show'),window.history.pushState('',document.title,window.location.pathname)},$('[data-toggle="try"]').click(j),$('[data-close="try"]').click(b),null!=window.location.hash){if('#try'===window.location.hash)return j(!0);if(0===window.location.hash.indexOf('#try'))return 0===$('#try .CodeMirror').length&&f(),c[0].setValue(decodeURIComponent(window.location.hash.slice(5))),j();if(''===window.location.hash)return a();if(e(window.location.hash),1<window.location.hash.length)return document.getElementById(window.location.hash.slice(1).replace(/try:.*/,'')).scrollIntoView()}})}).call(this);
 </script>
 
 </body>