Use CodeMirror for WebTry snippets.

experimental/webtry/res/js/webtry.js

 /**
  * Common JS that talks XHR back to the server and runs the code and receives
  * the results.
  */
 
 /**
  * A polyfill for HTML Templates.
  *
  * This just adds in the content attribute, it doesn't stop scripts
  * from running nor does it stop other side-effects.
@@ skipping 110 matching lines @@
     var embed = document.getElementById('embed');
     var embedButton = document.getElementById('embedButton');
     var code = document.getElementById('code');
     var output = document.getElementById('output');
     var stdout = document.getElementById('stdout');
     var img = document.getElementById('img');
     var tryHistory = document.getElementById('tryHistory');
     var parser = new DOMParser();
     var tryTemplate = document.getElementById('tryTemplate');
 
+    var editor = CodeMirror.fromTextArea(code, {
+      theme: "ambiance",
+      lineNumbers: true,
+      matchBrackets: true,
+      mode: "text/x-c++src",
+      indentUnit: 4,
+    });
+
+    // Match the initial textarea size.
+    editor.setSize(editor.defaultCharWidth() * code.cols,
+                   editor.defaultTextHeight() * code.rows);
+
+    // Suppress changes to the first/last line (draw wrapper method)
+    editor.on('beforeChange', function(cm, change) {
+      if (change.from.line < 1 || change.from.line == cm.lineCount() - 1)
+        change.cancel();
+    });
 
     function beginWait() {
       document.body.classList.add('waiting');
       run.disabled = true;
     }
 
 
     function endWait() {
       document.body.classList.remove('waiting');
       run.disabled = false;
@@ skipping 110 matching lines @@
 
     function onSubmitCode() {
       beginWait();
       clearOutput();
       var req = new XMLHttpRequest();
       req.addEventListener('load', codeComplete);
       req.addEventListener('error', xhrError);
       req.overrideMimeType('application/json');
       req.open('POST', '/', true);
       req.setRequestHeader('content-type', 'application/json');
-      req.send(JSON.stringify({'code': code.value, 'name': workspaceName}));
+      req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName}));
     }
     run.addEventListener('click', onSubmitCode);
 
 
     function onEmbedClick() {
       embed.style.display='inline';
     }
 
     if (embedButton) {
       embedButton.addEventListener('click', onEmbedClick);
     }
 
 
     // Add the images to the history if we are on a workspace page.
     if (tryHistory && history) {
       for (var i=0; i<history.length; i++) {
         addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
       }
     }
 
 })(workspaceName);