Upgrading to CodeMirror 3.0.

media/css/codemirror-themes/ambiance-mobile.css

@@ -0,0 +1,6 @@
+.cm-s-ambiance.CodeMirror {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  -o-box-shadow: none;
+  box-shadow: none;
+}

media/css/codemirror-themes/blackboard.css

@@ -1,9 +1,9 @@
 /* Port of TextMate's Blackboard theme */
 
-.cm-s-blackboard { background: #0C1021; color: #F8F8F8; }
+.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
 .cm-s-blackboard .CodeMirror-selected { background: #253B76 !important; }
-.cm-s-blackboard .CodeMirror-gutter { background: #0C1021; border-right: 0; }
+.cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
-.cm-s-blackboard .CodeMirror-gutter-text { color: #888; }
+.cm-s-blackboard .CodeMirror-linenumber { color: #888; }
 .cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
 
 .cm-s-blackboard .cm-keyword { color: #FBDE2D; }

media/css/codemirror-themes/cobalt.css

@@ -1,7 +1,7 @@
-.cm-s-cobalt { background: #002240; color: white; }
+.cm-s-cobalt.CodeMirror { background: #002240; color: white; }
 .cm-s-cobalt div.CodeMirror-selected { background: #b36539 !important; }
-.cm-s-cobalt .CodeMirror-gutter { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-cobalt .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
-.cm-s-cobalt .CodeMirror-gutter-text { color: #d0d0d0; }
+.cm-s-cobalt .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-cobalt span.cm-comment { color: #08f; }

media/css/codemirror-themes/erlang-dark.css

@@ -1,7 +1,7 @@
-.cm-s-erlang-dark { background: #002240; color: white; }
+.cm-s-erlang-dark.CodeMirror { background: #002240; color: white; }
 .cm-s-erlang-dark div.CodeMirror-selected { background: #b36539 !important; }
-.cm-s-erlang-dark .CodeMirror-gutter { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-erlang-dark .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
-.cm-s-erlang-dark .CodeMirror-gutter-text { color: #d0d0d0; }
+.cm-s-erlang-dark .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-erlang-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-erlang-dark span.cm-atom       { color: #845dc4; }

media/css/codemirror-themes/lesser-dark.css

@@ -9,15 +9,15 @@ Ported to CodeMirror by Peter Kroon
   font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
 }
 
-.cm-s-lesser-dark { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
+.cm-s-lesser-dark.CodeMirror { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
 .cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/
 .cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
-.cm-s-lesser-dark .CodeMirror-lines { margin-left:3px; margin-right:3px; }/*editable code holder*/
+.cm-s-lesser-dark pre { padding: 0 8px; }/*editable code holder*/
 
 div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
 
-.cm-s-lesser-dark .CodeMirror-gutter { background: #262626; border-right:1px solid #aaa; padding-right:3px; min-width:2.5em; }
+.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
-.cm-s-lesser-dark .CodeMirror-gutter-text { color: #777; }
+.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }
 
 .cm-s-lesser-dark span.cm-keyword { color: #599eff; }
 .cm-s-lesser-dark span.cm-atom { color: #C2B470; }

media/css/codemirror-themes/monokai.css

@@ -1,9 +1,9 @@
 /* Based on Sublime Text's Monokai theme */
 
-.cm-s-monokai {background: #272822; color: #f8f8f2;}
+.cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
 .cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
-.cm-s-monokai .CodeMirror-gutter {background: #272822; border-right: 0px;}
+.cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
-.cm-s-monokai .CodeMirror-gutter-text {color: #d0d0d0;}
+.cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
 .cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
 
 .cm-s-monokai span.cm-comment {color: #75715e;}

media/css/codemirror-themes/night.css

@@ -1,9 +1,9 @@
 /* Loosely based on the Midnight Textmate theme */
 
-.cm-s-night { background: #0a001f; color: #f8f8f8; }
+.cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; }
 .cm-s-night div.CodeMirror-selected { background: #447 !important; }
-.cm-s-night .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-night .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
-.cm-s-night .CodeMirror-gutter-text { color: #f8f8f8; }
+.cm-s-night .CodeMirror-linenumber { color: #f8f8f8; }
 .cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-night span.cm-comment { color: #6900a1; }

media/css/codemirror-themes/rubyblue.css

@@ -1,9 +1,9 @@
 .cm-s-rubyblue { font:13px/1.4em Trebuchet, Verdana, sans-serif; }	/* - customized editor font - */
 
-.cm-s-rubyblue { background: #112435; color: white; }
+.cm-s-rubyblue.CodeMirror { background: #112435; color: white; }
 .cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; }
-.cm-s-rubyblue .CodeMirror-gutter { background: #1F4661; border-right: 7px solid #3E7087; min-width:2.5em; }
+.cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; }
-.cm-s-rubyblue .CodeMirror-gutter-text { color: white; }
+.cm-s-rubyblue .CodeMirror-linenumber { color: white; }
 .cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; }

media/css/codemirror-themes/twilight.css

@@ -0,0 +1,26 @@
+.cm-s-twilight.CodeMirror { background: #141414; color: #f7f7f7; } /**/
+.cm-s-twilight .CodeMirror-selected { background: #323232 !important; } /**/
+
+.cm-s-twilight .CodeMirror-gutters { background: #222; border-right: 1px solid #aaa; }
+.cm-s-twilight .CodeMirror-linenumber { color: #aaa; }
+.cm-s-twilight .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-twilight .cm-keyword {  color: #f9ee98; } /**/
+.cm-s-twilight .cm-atom { color: #FC0; }
+.cm-s-twilight .cm-number { color:  #ca7841; } /**/
+.cm-s-twilight .cm-def { color: #8DA6CE; }
+.cm-s-twilight span.cm-variable-2, .cm-s-twilight span.cm-tag { color: #607392; } /**/
+.cm-s-twilight span.cm-variable-3, .cm-s-twilight span.cm-def { color: #607392; } /**/
+.cm-s-twilight .cm-operator { color: #cda869; } /**/
+.cm-s-twilight .cm-comment { color:#777; font-style:italic; font-weight:normal; } /**/
+.cm-s-twilight .cm-string { color:#8f9d6a; font-style:italic; } /**/
+.cm-s-twilight .cm-string-2 { color:#bd6b18 } /*?*/
+.cm-s-twilight .cm-meta { background-color:#141414; color:#f7f7f7; } /*?*/
+.cm-s-twilight .cm-error { border-bottom: 1px solid red; }
+.cm-s-twilight .cm-builtin { color: #cda869; } /*?*/
+.cm-s-twilight .cm-tag { color: #997643; } /**/
+.cm-s-twilight .cm-attribute { color: #d6bb6d; } /*?*/
+.cm-s-twilight .cm-header { color: #FF6400; }
+.cm-s-twilight .cm-hr { color: #AEAEAE; }
+.cm-s-twilight .cm-link {   color:#ad9361; font-style:italic; text-decoration:none; } /**/
+

media/css/codemirror-themes/vibrant-ink.css

@@ -1,10 +1,10 @@
 /* Taken from the popular Visual Studio Vibrant Ink Schema */
 
-.cm-s-vibrant-ink { background: black; color: white; }
+.cm-s-vibrant-ink.CodeMirror { background: black; color: white; }
 .cm-s-vibrant-ink .CodeMirror-selected { background: #35493c !important; }
 
-.cm-s-vibrant-ink .CodeMirror-gutter { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
-.cm-s-vibrant-ink .CodeMirror-gutter-text { color: #d0d0d0; }
+.cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-vibrant-ink .cm-keyword {  color: #CC7832; }

media/css/codemirror-themes/xq-dark.css

@@ -20,10 +20,10 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
-.cm-s-xq-dark { background: #0a001f; color: #f8f8f8; }
+.cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
 .cm-s-xq-dark span.CodeMirror-selected { background: #a8f !important; }
-.cm-s-xq-dark .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-xq-dark .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
-.cm-s-xq-dark .CodeMirror-gutter-text { color: #f8f8f8; }
+.cm-s-xq-dark .CodeMirror-linenumber { color: #f8f8f8; }
 .cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
 
 .cm-s-xq-dark span.cm-keyword {color: #FFBD40;}

media/css/codemirror.css

@@ -1,114 +1,50 @@
+/* BASICS */
+
 .CodeMirror {
-  line-height: 1em;
+  /* Set height, width, borders, and global font properties here */
   font-family: monospace;
-
-  /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
-  position: relative;
-  /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
-  overflow: hidden;
-}
-
-.CodeMirror-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
   height: 300px;
-  /* This is needed to prevent an IE[67] bug where the scrolled content
+}
-     is visible outside of the scrolling box. */
+.CodeMirror-scroll {
-  position: relative;
+  /* Set scrolling behaviour here */
-  outline: none;
+  overflow: auto;
 }
 
-/* Vertical scrollbar */
+/* PADDING */
-.CodeMirror-scrollbar {
-  float: right;
-  overflow-x: hidden;
-  overflow-y: scroll;
 
-  /* This corrects for the 1px gap introduced to the left of the scrollbar
-     by the rule for .CodeMirror-scrollbar-inner. */
-  margin-left: -1px;
-}
-.CodeMirror-scrollbar-inner {
-  /* This needs to have a nonzero width in order for the scrollbar to appear
-     in Firefox and IE9. */
-  width: 1px;
-}
-.CodeMirror-scrollbar.cm-sb-overlap {
-  /* Ensure that the scrollbar appears in Lion, and that it overlaps the content
-     rather than sitting to the right of it. */
-  position: absolute;
-  z-index: 1;
-  float: none;
-  right: 0;
-  min-width: 12px;
-}
-.CodeMirror-scrollbar.cm-sb-nonoverlap {
-  min-width: 12px;
-}
-.CodeMirror-scrollbar.cm-sb-ie7 {
-  min-width: 18px;
-}
-
-.CodeMirror-gutter {
-  position: absolute; left: 0; top: 0;
-  z-index: 10;
-  background-color: #f7f7f7;
-  border-right: 1px solid #eee;
-  min-width: 2em;
-  height: 100%;
-}
-.CodeMirror-gutter-text {
-  color: #aaa;
-  text-align: right;
-  padding: .4em .2em .4em .4em;
-  white-space: pre !important;
-  cursor: default;
-}
 .CodeMirror-lines {
-  padding: .4em;
+  padding: 4px 0; /* Vertical padding around content */
-  white-space: pre;
-  cursor: text;
 }
-.CodeMirror-lines * {
-  /* Necessary for throw-scrolling to decelerate properly on Safari. */
-  pointer-events: none;
-}
-
 .CodeMirror pre {
-  -moz-border-radius: 0;
+  padding: 0 4px; /* Horizontal padding of content */
-  -webkit-border-radius: 0;
-  -o-border-radius: 0;
-  border-radius: 0;
-  border-width: 0; margin: 0; padding: 0; background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  padding: 0; margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
 }
 
-.CodeMirror-wrap pre {
+.CodeMirror-scrollbar-filler {
-  word-wrap: break-word;
+  background-color: white; /* The little square between H and V scrollbars */
-  white-space: pre-wrap;
-  word-break: normal;
-}
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
 }
 
-.CodeMirror textarea {
+/* GUTTER */
-  outline: none !important;
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
 }
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+}
+
+/* CURSOR */
 
 .CodeMirror pre.CodeMirror-cursor {
-  z-index: 10;
-  position: absolute;
-  visibility: hidden;
   border-left: 1px solid black;
-  border-right: none;
+}
-  width: 0;
+/* Shown when moving in bi-directional text */
+.CodeMirror pre.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
 }
 .cm-keymap-fat-cursor pre.CodeMirror-cursor {
   width: auto;
@@ -121,49 +57,183 @@
 .cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 }
+/* Can style cursor different in overwrite (non-insert) mode */
 .CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-error {color: #f00;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-emstrong {font-style: italic; font-weight: bold;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px; padding-right: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+  z-index: 6;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  height: 100%;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%; height: 0px;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror pre.CodeMirror-cursor {
+  position: absolute;
+  visibility: hidden;
+  border-right: none;
+  width: 0;
+}
 .CodeMirror-focused pre.CodeMirror-cursor {
   visibility: visible;
 }
 
-div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 
 .CodeMirror-searching {
   background: #ffa;
   background: rgba(255, 255, 0, .4);
 }
 
-/* Default theme */
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
 
-.cm-s-default span.cm-keyword {color: #708;}
+@media print {
-.cm-s-default span.cm-atom {color: #219;}
+  /* Hide the cursor when printing */
-.cm-s-default span.cm-number {color: #164;}
+  .CodeMirror pre.CodeMirror-cursor {
-.cm-s-default span.cm-def {color: #00f;}
+    visibility: hidden;
-.cm-s-default span.cm-variable {color: black;}
+  }
-.cm-s-default span.cm-variable-2 {color: #05a;}
+}
-.cm-s-default span.cm-variable-3 {color: #085;}
-.cm-s-default span.cm-property {color: black;}
-.cm-s-default span.cm-operator {color: black;}
-.cm-s-default span.cm-comment {color: #a50;}
-.cm-s-default span.cm-string {color: #a11;}
-.cm-s-default span.cm-string-2 {color: #f50;}
-.cm-s-default span.cm-meta {color: #555;}
-.cm-s-default span.cm-error {color: #f00;}
-.cm-s-default span.cm-qualifier {color: #555;}
-.cm-s-default span.cm-builtin {color: #30a;}
-.cm-s-default span.cm-bracket {color: #cc7;}
-.cm-s-default span.cm-tag {color: #170;}
-.cm-s-default span.cm-attribute {color: #00c;}
-.cm-s-default span.cm-header {color: blue;}
-.cm-s-default span.cm-quote {color: #090;}
-.cm-s-default span.cm-hr {color: #999;}
-.cm-s-default span.cm-link {color: #00c;}
-
-span.cm-header, span.cm-strong {font-weight: bold;}
-span.cm-em {font-style: italic;}
-span.cm-emstrong {font-style: italic; font-weight: bold;}
-span.cm-link {text-decoration: underline;}
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

media/css/style.scss

@@ -726,23 +726,23 @@ article.snipt {
                 vertical-align: top;
 
                 &.linenos {
-                    border-right: 1px solid #EEEEEE;
+                    border-right: 1px solid #DDDDDD;
-                    min-width: 24px;
+                    min-width: 28px;
 
                     div.linenodiv {
                         pre {
+                            background: #F7F7F7;
                             border: 0;
                             line-height: 16px;
                             margin: 0;
-                            padding: 5px 3px 0 7px;
+                            padding: 4px 3px 0 0;
                             white-space: normal;
                             @include border-radius(0);
 
                             a, span {
-                                color: #AAA;
+                                color: #999;
                                 display: block;
-                                font-size: 12px;
+                                font: normal 12px/16px $Consolas;
-                                line-height: 16px;
                                 margin: 0;
                                 padding: 0;
                                 text-align: right;
@@ -768,7 +768,7 @@ article.snipt {
                             margin: 0;
                             min-height: 220px;
                             overflow-x: auto;
-                            padding: 5px;
+                            padding: 4px 5px 4px 4px;
                             white-space: pre;
                             word-wrap: normal;
                             width: 583px;
@@ -1567,149 +1567,6 @@ body.detail {
         margin-right: 100px;
     }
 }
-body.editing {
-    header.main, header.sub {
-        display: none;
-    }
-    header.fixed-save {
-        background: #FFF url('/static/images/header-fixed-save.gif') top left repeat;
-        border-bottom: 1px solid #DDDDDD;
-        height: 40px;
-        left: 0;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        z-index: 50;
-
-        div.inner {
-            float: none;
-            margin: 0 auto;
-            padding-top: 6px;
-            width: 940px;
-
-            .cancel, .save, .save-and-close {
-                float: right;
-                margin-left: 10px;
-            }
-            .save-and-close {
-                margin-right: 242px;
-            }
-        }
-    }
-    section.main {
-        div.inner {
-            section.snipts {
-                article.editing {
-                    margin-top: 50px;
-
-                    div.container {
-                        width: 696px;
-
-                        section.code {
-                            padding: 0;
-
-                            .CodeMirror {
-                                color: #333;
-                                font: normal 12px/16px $Consolas;
-                            }
-                            .CodeMirror-gutter {
-                                min-height: 1000px;
-                            }
-                            .CodeMirror-gutter-text {
-                                padding: 5px 3px 0 7px;
-                            }
-                            .CodeMirror-matchingbracket {
-                                color: #32A8F6;
-                            }
-                        }
-                        header {
-                            h1 {
-                                margin: 5px 0 6px 10px;
-
-                                input {
-                                    color: #666;
-                                    font: bold 16px/20px $Helvetica;
-                                    margin: 0;
-                                    width: 811px;
-                                    width: 666px;
-                                }
-                            }
-                            h2 {
-                                border: none;
-                            }
-                        }
-                    }
-                    aside {
-                        margin-top: 0;
-                        width: 243px;
-
-                        div.in {
-                            padding-left: 10px;
-
-                            label {
-                                margin: 20px 0;
-
-                                & > span {
-                                    color: #32A8F6;
-                                    display: block;
-                                    font: bold 12px $Helvetica;
-                                    margin-bottom: 5px;
-                                    text-transform: uppercase;
-                                }
-                            }
-                            & > label {
-                                margin-top: 6px;
-                            }
-                            textarea {
-                                height: 100px;
-                                padding: 7px 9px;
-                                width: 202px;
-                            }
-                            label.public, label.blog-post {
-                                background: #EFEEEF;
-                                border: 1px solid #DDDDDD;
-                                cursor: pointer;
-                                margin-right: 11px;
-                                padding: 3px 5px;
-                                @include border-radius;
-
-                                input {
-                                    display: inline-block;
-                                    margin: 4px 4px 0 4px;
-
-                                    &:focus {
-                                        outline: none;
-                                    }
-                                }
-                                span {
-                                    color: #7B7B79;
-                                    display: inline-block;
-                                    text-transform: none;
-                                    vertical-align: -3px;
-                                }
-                                &.is-private {
-                                    background: #EFEEEF url('/static/images/private-icon-edit.png') 199px center no-repeat;
-                                }
-                                &.is-public {
-                                    background: #F2DEDE;
-                                    border: 1px solid #EED3D7;
-
-                                    span {
-                                        color: #B94A48;
-                                    }
-                                }
-                                &.is-blog-post {
-                                    background: #DAE3EE;
-                                    border: 1px solid #C8D1DE;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 body.error {
     section.main {
         div.inner {
@@ -2055,3 +1912,141 @@ body.tags {
         padding-top: 30px;
     }
 }
+body.editing {
+    header.main, header.sub {
+        display: none;
+    }
+    header.fixed-save {
+        background: #FFF url('/static/images/header-fixed-save.gif') top left repeat;
+        border-bottom: 1px solid #DDDDDD;
+        height: 40px;
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 50;
+
+        div.inner {
+            float: none;
+            margin: 0 auto;
+            padding-top: 6px;
+            width: 940px;
+
+            .cancel, .save, .save-and-close {
+                float: right;
+                margin-left: 10px;
+            }
+            .save-and-close {
+                margin-right: 242px;
+            }
+        }
+    }
+    section.main {
+        div.inner {
+            section.snipts {
+                article.editing {
+                    margin-top: 50px;
+
+                    div.container {
+                        width: 696px;
+
+                        section.code {
+                            padding: 0;
+
+                            .CodeMirror {
+                                color: #333;
+                                cursor: text;
+                                font: normal 12px/16px $Consolas;
+                            }
+                            .CodeMirror-matchingbracket {
+                                color: #32A8F6;
+                            }
+                        }
+                        header {
+                            h1 {
+                                margin: 4px 0 5px 8px;
+
+                                input {
+                                    color: #666;
+                                    font: bold 16px/20px $Helvetica;
+                                    margin: 0;
+                                    width: 811px;
+                                    width: 666px;
+                                }
+                            }
+                            h2 {
+                                border: none;
+                            }
+                        }
+                    }
+                    aside {
+                        margin-top: 0;
+                        width: 243px;
+
+                        div.in {
+                            padding-left: 10px;
+
+                            label {
+                                margin: 20px 0;
+
+                                & > span {
+                                    color: #32A8F6;
+                                    display: block;
+                                    font: bold 12px $Helvetica;
+                                    margin-bottom: 5px;
+                                    text-transform: uppercase;
+                                }
+                            }
+                            & > label {
+                                margin-top: 6px;
+                            }
+                            textarea {
+                                height: 100px;
+                                padding: 7px 9px;
+                                width: 202px;
+                            }
+                            label.public, label.blog-post {
+                                background: #EFEEEF;
+                                border: 1px solid #DDDDDD;
+                                cursor: pointer;
+                                margin-right: 11px;
+                                padding: 3px 5px;
+                                @include border-radius;
+
+                                input {
+                                    display: inline-block;
+                                    margin: 4px 4px 0 4px;
+
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                }
+                                span {
+                                    color: #7B7B79;
+                                    display: inline-block;
+                                    text-transform: none;
+                                    vertical-align: -3px;
+                                }
+                                &.is-private {
+                                    background: #EFEEEF url('/static/images/private-icon-edit.png') 199px center no-repeat;
+                                }
+                                &.is-public {
+                                    background: #F2DEDE;
+                                    border: 1px solid #EED3D7;
+
+                                    span {
+                                        color: #B94A48;
+                                    }
+                                }
+                                &.is-blog-post {
+                                    background: #DAE3EE;
+                                    border: 1px solid #C8D1DE;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

media/js/src/modules/snipt.js

@@ -143,6 +143,7 @@
                 gutter: true,
                 indentUnit: 4,
                 lineNumbers: true,
+                javascriptHint: true,
                 matchBrackets: true,
                 mode: that.guessCodeMirrorLexer($selectLexer.val()),
                 value: that.model.get('code')

media/js/src/modules/snipt.min.js

@@ -2,7 +2,7 @@
 (function(Snipt){Snipt.SniptModel=Backbone.Model.extend({toSafe:function(){var snipt=this.toJSON();snipt.code=this.escape('code');snipt.title=this.escape('title');snipt.tags_list=this.escape('tags_list');if(typeof snipt.tags==='object'){for(var i;i<snipt.tags.length;i++){snipt.tags[i].name=_.escape(snipt.tags[i].name);}}
 return snipt;}});Snipt.SniptView=Backbone.View.extend({tagName:'article',initialize:function(){this.model.view=this;this.model.bind('change',this.render,this);this.template=_.template($('#snipt').html());this.editTemplate=_.template($('#edit').html());this.initLocalVars();this.initLineNumbers();},events:{'click a.copy':'copyFromClick','click a.edit':'edit','click a.favorite':'favoriteToggle','click a.embed':'embedFromClick','click a.expand':'expand','click .container':'selectFromClick','copyClose':'copyClose','copyRaw':'copy','detail':'detail','deselect':'deselect','destroy':'destroy','edit':'edit','embed':'embed','embedClose':'embedClose','expand':'expand','fadeAndRemove':'fadeAndRemove','goToAuthor':'goToAuthor','next':'next','prev':'prev','selectSnipt':'select'},copy:function(){$('textarea',this.$copyModal).remove();window.ui_halted=true;this.$copyModalBody.append('<textarea class="raw"></textarea>');$textarea=$('textarea.raw',this.$copyModalBody).val(this.model.get('code'));this.$copyModal.modal('show');$textarea.select();},copyClose:function(){$('textarea',this.$copyModal).remove();},copyFromClick:function(){this.copy();return false;},deselect:function(){this.$el.removeClass('selected');window.$selected=false;},detail:function(){window.location=this.model.get('absolute_url');},destroy:function(){this.model.destroy();},edit:function(){window.editing=true;window.ui_halted=true;this.select();that=this;var editPane=this.editTemplate({snipt:this.model.toSafe()});window.site.$main.hide();window.site.$body.addClass('detail editing');window.site.$main_edit.html(editPane);$('option[value="'+this.model.get('lexer')+'"]',window.site.$main_edit).attr('selected','selected');var $selectLexer=$('select#id_lexer',window.site.$main_edit);$selectLexer.chosen();$('label.blog-post input',window.site.$main_edit).on('change',function(){var $checkbox=$(this);var $label=$checkbox.parent();var $publish_date=$label.siblings('label.publish-date');if($checkbox.attr('checked')){$label.removeClass('is-not-blog-post').addClass('is-blog-post');$publish_date.show();}else{$label.addClass('is-not-blog-post').removeClass('is-blog-post');$publish_date.hide();}
 return false;}).trigger('change');$('label.public input',window.site.$main_edit).on('change',function(){var $checkbox=$(this);var $label=$checkbox.parent();if($checkbox.attr('checked')){$label.removeClass('is-private').addClass('is-public');}else{$label.addClass('is-private').removeClass('is-public');}
-return false;}).trigger('change');window.site.$main_edit.show();var $editor=$('div#editor',window.site.$main_edit);window.editor=CodeMirror($editor.get(0),{autofocus:true,fixedGutter:true,gutter:true,indentUnit:4,lineNumbers:true,matchBrackets:true,mode:that.guessCodeMirrorLexer($selectLexer.val()),value:that.model.get('code')});$selectLexer.change(function(){var $selectedLexer=$('option:selected',$selectLexer);window.editor.setOption('mode',that.guessCodeMirrorLexer($selectedLexer.val()));});window.editor.setSize('100%',$(window).height()-147);$('textarea, input',window.site.$main_edit).bind('keydown','esc',function(e){$(this).blur();return false;});$('button.delete',window.site.$main_edit).on('click',function(){if(confirm('Are you sure you want to delete this snipt?')){that.model.destroy();window.site.snipt_list.escapeUI(true);}
+return false;}).trigger('change');window.site.$main_edit.show();var $editor=$('div#editor',window.site.$main_edit);window.editor=CodeMirror($editor.get(0),{autofocus:true,fixedGutter:true,gutter:true,indentUnit:4,lineNumbers:true,javascriptHint:true,matchBrackets:true,mode:that.guessCodeMirrorLexer($selectLexer.val()),value:that.model.get('code')});$selectLexer.change(function(){var $selectedLexer=$('option:selected',$selectLexer);window.editor.setOption('mode',that.guessCodeMirrorLexer($selectedLexer.val()));});window.editor.setSize('100%',$(window).height()-147);$('textarea, input',window.site.$main_edit).bind('keydown','esc',function(e){$(this).blur();return false;});$('button.delete',window.site.$main_edit).on('click',function(){if(confirm('Are you sure you want to delete this snipt?')){that.model.destroy();window.site.snipt_list.escapeUI(true);}
 return false;});$('button.cancel',window.site.$main_edit).on('click',function(){window.site.snipt_list.escapeUI();return false;});$('button.save',window.site.$main_edit).on('click',function(){$('button.cancel').text('Close');that.save();return false;});$('button.save-and-close',window.site.$main_edit).on('click',function(){that.save();window.site.snipt_list.escapeUI();return false;});window.scrollTo(0,0);return false;},embed:function(){$('textarea',this.$embedModal).remove();window.ui_halted=true;this.$embedModalBody.append('<textarea class="raw"></textarea>');$textarea=$('textarea.raw',this.$embedModalBody).val('<script type="text/javascript" src="'+this.model.get('embed_url')+'"></script>');this.$embedModal.modal('show');$textarea.select();},embedFromClick:function(){this.embed();return false;},embedClose:function(){$('textarea',this.$embedModal).remove();},expand:function(){this.$container.toggleClass('expanded',100);this.$tags.toggleClass('expanded');this.select();return false;},fadeAndRemove:function(){var $toRemove=$(this.el);var $nextSnipt=$toRemove.next('article.snipt');window.$selected=false;$toRemove.fadeOut('fast',function(){$(this).remove();$nextSnipt.trigger('selectSnipt');});return false;},goToAuthor:function(){window.location=this.model.get('user').absolute_url;},guessCodeMirrorLexer:function(val){if(val==='html'){return'htmlmixed';}
 if(val==='js')return'javascript';if(val==='rb')return'ruby';return val;},favoriteToggle:function(){var that=this;if(this.$el.hasClass('favorited')){$.ajax('/api/private/favorite/'+this.model.get('favorite_id')+'/',{type:'delete',success:function(){that.$el.removeClass('favorited');that.$favorite.text('Favorite');},headers:{'Authorization':'ApiKey '+window.user+':'+window.api_key}});}else{$.ajax('/api/private/favorite/',{data:'{"snipt": '+this.model.get('id')+'}',contentType:'application/json',type:'post',success:function(resp){that.$el.addClass('favorited');that.model.set({'favorite_id':resp.id},{'silent':true});that.$favorite.text('Favorited');},headers:{'Authorization':'ApiKey '+window.user+':'+window.api_key}});}
 return false;},initLineNumbers:function(){var lines=$('span.special',this.$el);var that=this;$.each(lines,function(){var l=$(this);var num=l.text().trim();var url=that.model.get('absolute_url');l.replaceWith('<a href="'+url+'#line-'+num+'">'+num+'</a>');});},initLocalVars:function(){this.$aside=$('aside',this.$el);this.$container=$('div.container',this.$el);this.$copyModal=$('div.copy-modal',this.$el);this.$copyModalBody=$('div.modal-body',this.$copyModal);this.$embedModal=$('div.embed-modal',this.$el);this.$embedModalBody=$('div.modal-body',this.$embedModal);this.$favorite=$('a.favorite',this.$el);this.$h1=$('header h1 a',this.$el);this.$tags=$('section.tags ul',this.$aside);this.$copyModal.on('hidden',function(e){$(this).parent().trigger('copyClose');window.ui_halted=false;window.from_modal=true;});this.$embedModal.on('hidden',function(e){$(this).parent().trigger('embedClose');window.ui_halted=false;window.from_modal=true;});},next:function(){if(!window.ui_halted){nextSnipt=this.$el.next('article.snipt');if(nextSnipt.length){return nextSnipt.trigger('selectSnipt');}}},prev:function(){if(!window.ui_halted){prevSnipt=this.$el.prev('article.snipt');if(prevSnipt.length){return prevSnipt.trigger('selectSnipt');}}},remove:function(){return false;},render:function(){this.$el.html(this.template({snipt:this.model.toSafe()}));this.initLocalVars();this.initLineNumbers();if(this.model.get('blog_post')===true){this.$el.addClass('blog-post');}else{this.$el.removeClass('blog-post');}

templates/base.html

@@ -19,7 +19,7 @@
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 
-    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/snipt.css?47" />
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/snipt.css?48" />
 
     {% if has_snipts and not detail %}
         <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ request.path }}?rss{% if not public %}&amp;api_key={{ request.user.api_key.key }}{% endif %}" />
@@ -343,7 +343,7 @@
         </div>
     {% endblock %}
 
-    <script type="text/javascript" src="{{ STATIC_URL }}js/snipt.js?31"></script>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/snipt.js?32"></script>
     {% block extra-scripts %}{% endblock %}
 
     {% block inline-js %}