line numbers

app/assets/stylesheets/molecules/_admin.scss

@@ -6,10 +6,6 @@ main {
   .savecancel {
     @include span-columns(12);
   }
-  .error {
-    background-color: transparent;
-    color: $accent-color-1;
-  }
   label.error {
     text-align: right;
     padding-top: 0;

app/assets/stylesheets/molecules/_livecoder.scss

@@ -2,12 +2,14 @@
   margin: 10px 0;
 
   textarea {
-    border: 1px solid black;
-    min-height: 200px;
-    padding: 10px;
-    width: 100%;
-    margin-bottom: 0;
     background-color: #fff;
+    border: 1px solid black;
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 10px;
+    // line-height: 1.6em;
+    margin-bottom: 0;
+    min-height: 205px;
+    width: 100%;
 
     &[disabled] {
       background-color: #ddd;
@@ -15,7 +17,12 @@
   }
 }
 
-.code-input ~ button { 
+.code-input textarea,
+.questions_tpl .code-input textarea {
+  padding: 4px 0.2rem 0 2rem;
+}
+
+.code-input ~ button {
   margin-left: 0;
   clear: both;
   display: block;
@@ -58,3 +65,72 @@ iframe {
     }
   }
 }
+
+
+
+// jQuery Lined Textarea Plugin
+//   http://alan.blog-city.com/jquerylinedtextarea.htm
+//
+// Copyright (c) 2010 Alan Williamson
+//
+// Released under the MIT License:
+// http://www.opensource.org/licenses/mit-license.php
+//
+// Usage:
+//   Displays a line number count column to the left of the textarea
+//
+//   Class up your textarea with a given class, or target it directly
+//   with JQuery Selectors
+//
+//   $(".lined").linedtextarea({
+//   	selectedLine: 10,
+//    selectedClass: 'lineselect'
+//   });
+
+.linedwrap {
+	border: 1px solid black;
+	padding: 0;
+  position: relative;
+}
+
+.linedtextarea {
+	padding: 0;
+	margin: 0;
+}
+
+.linedtextarea textarea, .linedwrap .codelines .lineno {
+	font-size: 10pt;
+  font-family: "Lucida Console", Monaco, monospace;
+	line-height: normal !important;
+}
+
+.linedtextarea textarea {
+	padding-right: 0.3em;
+	padding-top: 0.3em;
+	border: 0;
+}
+
+.linedwrap .lines {
+	margin-top: 0px;
+	overflow: hidden;
+	border-right: 1px solid #c0c0c0;
+	margin-right: 10px;
+  position: absolute;
+  left: 0.3rem;
+}
+
+.linedwrap .codelines {
+	padding-top: 5px;
+}
+
+.linedwrap .codelines .lineno {
+	color:#AAAAAA;
+	padding-right: 0.5em;
+	padding-top: 0.0em;
+	text-align: right;
+	white-space: nowrap;
+}
+
+.linedwrap .codelines .lineselect {
+	color: red;
+}