Move code example HTML into a template where it belongs

documentation/v2/code.coffee

@@ -1,20 +1,11 @@
 fs           = require 'fs'
+_            = require 'underscore'
 CoffeeScript = require '../../lib/coffee-script'
 
 
 module.exports = ->
-  (file, executable = no, showLoad = yes) ->
+  (file, run = no) ->
     cs = fs.readFileSync "documentation/examples/#{file}.coffee", 'utf-8'
-    js = CoffeeScript.compile cs, bare: yes
-    """
-      <aside class="container-fluid">
-        <div class="row">
-          <div class="col-md-6">
-            <textarea class="coffee-example">#{cs}</textarea>
-          </div>
-          <div class="col-md-6">
-            <textarea class="javascript-output">#{js}</textarea>
-          </div>
-        </div>
-      </aside>
-    """
+    js = CoffeeScript.compile cs, bare: yes # This is just the initial JavaScript output; it is replaced by dynamic compilation on changes of the CoffeeScript pane
+    render = _.template fs.readFileSync('documentation/v2/code.html', 'utf-8')
+    output = render {file, cs, js, run}

documentation/v2/code.html

@@ -0,0 +1,17 @@
+<aside class="code-example container-fluid" data-example="<%= file %>">
+  <div class="row">
+    <div class="col-md-6">
+      <textarea class="coffee-example" id="<%= file %>-coffee"><%= cs %></textarea>
+    </div>
+    <div class="col-md-6">
+      <textarea class="javascript-output" id="<%= file %>-js"><%= js %></textarea>
+    </div>
+  </div>
+  <% if (run) { %>
+  <div class="row">
+    <div class="col-xs-12 text-xs-right">
+      <button type="button" class="btn btn-primary" data-example="<%= file %>" data-run="<%= escape(run) %>"><% if (run === true) { %>▶<% } else { %><small>▶</small>&ensp;<%= run.replace(/"/g, '&quot;') %><% } %></button>
+    </div>
+  </div>
+  <% } %>
+</aside>

documentation/v2/docs.coffee

@@ -28,7 +28,7 @@ $('textarea').each (index) ->
     lineWrapping: on
     lineNumbers: off
     inputStyle: 'contenteditable'
-    # readOnly: (if mode is 'coffeescript' then no else 'nocursor')
+    readOnly: if mode is 'coffeescript' then no else 'nocursor'
     viewportMargin: Infinity
 
   if mode is 'coffeescript'

documentation/v2/docs.css

@@ -67,4 +67,11 @@ textarea {
 .CodeMirror {
   /* https://codemirror.net/demo/resize.html */
   height: auto;
+  background: transparent;
+}
+
+.code-example {
+  background-color: #f5f5f5;
+  padding: 1em;
+  border-radius: 0.3em;
 }