Fix section convention and code highlight

templates/jstextline.html

-<section class="text-input">
-  <input type="text" name="input_${id}" id="input_${id}" value="${value}" 
-	 % if size:
-	 size="${size}"
-	 % endif 
-         % if dojs == 'math':
-	 onkeyup="DoUpdateMath('${id}')"
-	 % endif 
-	 />
+<section id="jstextline_${id}" class="jstextline">
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}"
+   % if size:
+   size="${size}"
+   % endif
+   % if dojs == 'math':
+   onkeyup="DoUpdateMath('${id}')"
+   % endif
+   />
 
   % if dojs == 'math':
     <span id="display_${id}">`{::}`</span>
@@ -20,7 +20,7 @@
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>

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>
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${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">
-  .CodeMirror {border-style: solid;
-              border-width: 1px;}
-</style>
+  <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>
 </section>

templates/textinput.html

-<section class="text-input">
-  <input type="text" name="input_${id}" id="input_${id}" value="${value}" 
-	 % if size:
-	 size="${size}"
-	 % endif 
-	 />
+<section id="textinput_${id}" class="textinput">
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}"
+   % if size:
+   size="${size}"
+   % endif
+   />
 
   <span id="answer_${id}"></span>
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>