Fix section convention and code highlight

templates/jstextline.html

-<section class="text-input">
+<section id="jstextline_${id}" class="jstextline">
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
    % if size:
    size="${size}"

templates/textbox.html

-<section class="text-input">
+<section id="textbox_${id}" class="textbox">
   <textarea rows="30" cols="80" name="input_${id}" id="input_${id}">${value|h}</textarea>
 
   <span id="answer_${id}"></span>
@@ -18,17 +18,21 @@
   <span class="debug">${msg|n}</span>
   <br/>
 
-<br/>
-<script>
-// Note: We need to make the area follow the CodeMirror for this to 
-// work. 
-$(function(){
-  var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), 
-                                   {'mode':"python"});
-});
-</script>
-<style type="text/css">
+  <br/>
+
+  <script type="text/javascript" src="${ settings.LIB_URL }CodeMirror/codemirror.js"></script>
+  <script type="text/javascript" src="${ settings.LIB_URL }CodeMirror/python.js"></script>
+  <link rel="stylesheet" href="${ settings.LIB_URL }CodeMirror/codemirror.css" />
+  <script>
+    // Note: We need to make the area follow the CodeMirror for this to work.
+    $(function(){
+      var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), {
+        mode: "python"
+      });
+    });
+  </script>
+  <style type="text/css">
     .CodeMirror {border-style: solid;
       border-width: 1px;}
-</style>
+  </style>
 </section>

templates/textinput.html

-<section class="text-input">
+<section id="textinput_${id}" class="textinput">
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
    % if size:
    size="${size}"