improved syntax highlighting

doc-src/Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 PATH
   remote: ..
   specs:
-    compass (0.11.alpha.4.e616fa1)
+    compass (0.11.alpha.4.34f8763)
       chunky_png (~> 0.10.3)
       sass (>= 3.1.0.alpha.50)
 

doc-src/assets/javascripts/shBrushPlain.js

@@ -0,0 +1,33 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ *
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['text', 'plain', 'haml'];
+
+	SyntaxHighlighter.brushes.Plain = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();

doc-src/content/examples/compass/css3/opacity/markup.haml

@@ -1,9 +1,5 @@
 #opacity-10.opacity-example
-
 #opacity-20.opacity-example
-
 #opacity-50.opacity-example
-
 #opaque.opacity-example
-
 #transparent.opacity-example

doc-src/content/get-involved/index.haml

@@ -29,5 +29,5 @@ layout: default
 
   ## Give Financially
 
-  Compass is charityware. We ask users to [donate to United Mitochondrial Disease Foundation](http://umdf.org/compass)
+  Compass is charityware. You can use it as much as you like, but we encourage you to make a donation to help the [UMDF](http://umdf.org/)
-  to support their efforts to find a cure for this disease.
+  find a cure for mitochondrial disease. If you can, please [donate here](http://umdf.org/compass/). Thanks!

doc-src/content/stylesheets/partials/_code.scss

@@ -7,8 +7,8 @@
 html.sass { .mixin-source .syntaxhighlighter.sass, .example-source .syntaxhighlighter.sass { display: block; } }
 html.scss { .mixin-source .syntaxhighlighter.scss, .example-source .syntaxhighlighter.scss { display: block; } }
 html.css .example-source .syntaxhighlighter.css { display: block; }
-html.html .example-source .html { display: block; }
+html.html .example-source .syntaxhighlighter.html { display: block; }
-html.haml .example-source .haml { display: block; }
+html.haml .example-source .syntaxhighlighter.haml { display: block; }
 
 
 
@@ -20,7 +20,6 @@ html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
   //font-size: 1.1em;
   text-shadow: none;
   .code-block { background: none; @extend .clear-box-shadow; }
-  &, table td.code .container { position: static !important; }
   table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
   .toolbar { display: none; }
   //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
@@ -104,6 +103,8 @@ h2 + a[rel="view source"]{ margin-top: 6px;}
   .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
     span.title { display: inline; }
     a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
+  .container { position: relative; }
+  textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
 }
 .syntaxhighlighter, pre .code-block:first-child, pre {
   &::-webkit-scrollbar { height: 12px; }

doc-src/content/stylesheets/partials/_theme.scss

@@ -70,7 +70,9 @@
   &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
 
   #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
-  .mixin-source, .example-source { @extend .mixin-panel-#{$theme}; }
+  .mixin-source, .example-source { @extend .mixin-panel-#{$theme};
+    .container textarea { color: $code; }
+  }
   h2 a.help { color: $heading;}
 
   .source-documentation { @extend .doc-panel-#{$theme}; }
@@ -86,7 +88,7 @@
 // Dark theme
 .inset-panel-dark {
   @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
-  background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
+  background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
 
 .horizontal-rule-dark {
   @include box-shadow(rgba(#fff, .07) 0 1px 0);
@@ -105,7 +107,6 @@
 .demo-dark {
   @include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
 
-
 .heading-panel-dark {
   background: darken(#2f2f2f, 6);
   background: rgba(#000, .2);
@@ -137,6 +138,7 @@
 .mixin-panel-dark {
   @extend .inset-panel-dark;
   td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
+  .container textarea { background: darken(#2f2f2f, 6); }
 }
 
 @mixin dark-theme($docs: false) {
@@ -157,8 +159,8 @@
   $docs-nav-selected: $strong-text;
   $module-nav-selected: $link;
 
-  $option-panel-border: rgba(#000, .3);
+  $option-panel-border: rgba(#000, .5);
-  $option-panel-bg: rgba(#fff, .03);
+  $option-panel-bg: rgba(#fff, .06);
 
   @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
 
@@ -177,7 +179,7 @@
 .inset-panel-light {
   @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
   text-shadow: 0 1px 1px #fff;
-  background-color: rgba(#000, .04); }
+  background: darken(#fff, .04); background-color: rgba(#000, .04); }
 
 .horizontal-rule-light {
   @include box-shadow(#fff 0 1px 0);
@@ -227,6 +229,7 @@
   @extend .inset-panel-light;
   background: rgba(#fff, .8);
   td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
+  .container textarea { background: darken(#fff, .04); }
 }
 
 @mixin light-theme($docs: false) {

doc-src/content/stylesheets/screen.scss

@@ -1,4 +1,5 @@
 @import "compass";
+@import "compass/layout";
 @import "core/extensions";
 
 @include global-reset;
@@ -16,7 +17,7 @@
 @import "partials/code";
 @import "partials/example";
 
-//@import "syntax/syntax-theme";
+@import "syntax/syntax-theme";
 
 @import "core/clearing-classes";
 

doc-src/content/stylesheets/syntax/_shThemeRDark.scss

@@ -1,32 +1,113 @@
-// RDark SyntaxHighlighter theme based on theme by Radu Dineiu
-// http://www.vim.org/scripts/script.php?script_id=1732
 
-$background:					#1b2426 !default;
+// Dark Theme
 
-$line_highlighted_background:	#323E41 !default;
+$background: none;
-$line_highlighted_number:		#b9bdb6 !default;
 
-$gutter_text:					#afafaf !default;
+$line_highlighted_background:	#323E41;
-$gutter_border_color:			#435a5f !default;
+$line_highlighted_number:		#b9bdb6;
 
-$toolbar_collapsed_a:			#5ba1cf !default;
+$gutter_text:					#afafaf;
-$toolbar_collapsed_a_hover:		#5ce638 !default;
+$gutter_border_color:			rgba(#fff, .15);
-$toolbar_collapsed_background:	#000 !default;
 
-$toolbar_a:						#fff !default;
+$toolbar_collapsed_a:			#5ba1cf;
-$toolbar_a_hover:				#e0e8ff !default;
+$toolbar_collapsed_a_hover:		#5ce638;
+$toolbar_collapsed_background:	#000;
 
-$code_plain:					#b9bdb6 !default;
+$toolbar_a:						#fff;
-$code_comments:					#878a85 !default;
+$toolbar_a_hover:				#e0e8ff;
-$code_string:					#5ce638 !default;
+
-$code_keyword:					#5ba1cf !default;
+$code_plain:					#dadbb1;
-$code_preprocessor:				#435a5f !default;
+$code_comments:					#878a85;
-$code_variable:					#ffaa3e !default;
+$code_string:					#64b041;
-$code_value:					#009900 !default;
+$code_keyword:					#6cc7eb;
-$code_functions:				#ffaa3e !default;
+$code_preprocessor:				#cd5c57;
-$code_constants:				#e0e8ff !default;
+$code_variable:					$code_keyword;
-$code_color1:					#e0e8ff !default;
+$code_value:					#ffa0a0;
-$code_color2:					white !default;
+$code_functions:				#3d95e6;
-$code_color3:					#ffaa3e !default;
+$code_constants:				#e0e8ff;
+$code_script:					$code_keyword;
+$code_script_background:		none;
+$code_color1:					#b0b76b;
+$code_color2:					#98f77a;
+$code_color3:					#ffaa3e;
+$code_color4:					$code_plain;
+
+//@import "theme_template.scss";
+
+// Interface elements.
+html.dark .syntaxhighlighter {
+	// Actual syntax highlighter colors.
+	.plain, .plain a { color: $code_plain; }
+	.comments, .comments a { color: $code_comments; }
+	.string, .string a { color: $code_string; }
+	.keyword { color: $code_keyword; }
+	.preprocessor { color: $code_preprocessor; }
+	.variable { color: $code_variable; }
+	.value { color: $code_value; }
+	.functions { color: $code_functions; }
+	.constants { color: $code_constants; }
+	.script {
+		font-weight: bold;
+		color: $code_script;
+		background-color: $code_script_background;
+	}
+	.color1, .color1 a { color: $code_color1; }
+	.color2, .color2 a { color: $code_color2; }
+	.color3, .color3 a { color: $code_color3; }
+	.color4, .color4 a { color: $code_color4; }
+}
+
+// Light Theme
+
+$background: none;
+
+$line_highlighted_background:	#c3defe;
+$line_highlighted_number:		#fff;
+
+$gutter_text:					#787878;
+$gutter_border_color:			#d4d0c8;
+
+$toolbar_collapsed_a:			#3f5fbf;
+$toolbar_collapsed_a_hover:		#aa7700;
+$toolbar_collapsed_background:	#fff;
+
+$toolbar_a:						#a0a0a0;
+$toolbar_a_hover:				red;
+
+$code_plain:					black;
+$code_comments:					#3f5fbf;
+$code_string:					#4fa33f;
+$code_keyword:					#7f0055;
+$code_preprocessor:				#006699;
+$code_variable:					#aa7700;
+$code_value:					#4fa33f;
+$code_functions:				#b553ba;
+$code_constants:				#0066cc;
+$code_color1:					gray;
+$code_color2:					#ca6436;
+$code_color3:					red;
+$code_color4:					$code_plain;
+
+// Interface elements.
+html.light .syntaxhighlighter {
+	// Actual syntax highlighter colors.
+	.plain, .plain a { color: $code_plain; }
+	.comments, .comments a { color: $code_comments; }
+	.string, .string a { color: $code_string; }
+	.keyword { color: $code_keyword; }
+	.preprocessor { color: $code_preprocessor; }
+	.variable { color: $code_variable; }
+	.value { color: $code_value; }
+	.functions { color: $code_functions; }
+	.constants { color: $code_constants; }
+	.script {
+		font-weight: bold;
+		color: $code_script;
+		background-color: $code_script_background;
+	}
+	.color1, .color1 a { color: $code_color1; }
+	.color2, .color2 a { color: $code_color2; }
+	.color3, .color3 a { color: $code_color3; }
+	.color4, .color4 a { color: $code_color4; }
+}
 
-@import "theme_template.scss";

doc-src/content/stylesheets/syntax/_syntax-theme.scss

@@ -1,6 +1,7 @@
 // Default Syntax Highlighter theme.
 //@import "shCore.scss";
-//@import "shThemeRDark.scss";
+
+@import "shThemeRDark.scss";
 
 /*.syntaxhighlighter {
 	.keyword { font-weight: bold !important; }

doc-src/layouts/basic.haml

@@ -9,15 +9,8 @@
     %title
       #{@item[:title]} | Compass Documentation
     %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
-    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
+    = render "partials/js-core"
-    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+    = render "partials/js-highlighter"
-    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
-    %script(src="/javascripts/site.js" type="text/javascript")
-    %script(src="/javascripts/shCore.js" type="text/javascript" deferred)
-    %script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred)
-    %script(src="/javascripts/shBrushCss.js" type="text/javascript" deferred)
-    %script(src="/javascripts/shBrushXml.js" type="text/javascript" deferred)
-    %script(src="/javascripts/fixups.js" type="text/javascript" deferred)
     /[if lte IE 8]
       %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
     - if @item[:content_for_additional_css]

doc-src/layouts/default.haml

@@ -1,5 +1,4 @@
 !!!5
-- # This template is just the stuff until the body tag.
 %html.no-js{:dir => "ltr", :lang => "en"}
   %head
     %meta{:charset => "utf-8"}/
@@ -9,10 +8,7 @@
     %title
       #{@item[:title]} | Compass Documentation
     %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
-    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+    = render "partials/js-core"
-    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
-    %script(src="/javascripts/site.js" type="text/javascript")
-    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
   %body.default{body_attributes(@item)}
     #wrap
       = render "partials/main-navigation"

doc-src/layouts/homepage.haml

@@ -1,5 +1,4 @@
 !!!5
-- # This template is just the stuff until the body tag.
 %html.no-js{:dir => "ltr", :lang => "en"}
   %head
     %meta{:charset => "utf-8"}/
@@ -9,10 +8,7 @@
     %title
       #{@item[:title]} | Compass Documentation
     %link{:charset => "utf-8", :href => "/stylesheets/home.css", :rel => "stylesheet", :type => "text/css"}
-    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+    = render "partials/js-core"
-    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
-    %script(src="/javascripts/site.js" type="text/javascript")
-    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
     /[if lte IE 8]
       %link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
     - if @item[:content_for_additional_css]

doc-src/layouts/partials/js-core.haml

@@ -0,0 +1,5 @@
+%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
+%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
+%script(src="/javascripts/site.js" type="text/javascript")
+%script(src="/javascripts/fixups.js" type="text/javascript" deferred)

doc-src/layouts/partials/js-highlighter.haml

@@ -0,0 +1,5 @@
+%script(src="/javascripts/shCore.js" type="text/javascript" deferred)
+%script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred)
+%script(src="/javascripts/shBrushCss.js" type="text/javascript" deferred)
+%script(src="/javascripts/shBrushXml.js" type="text/javascript" deferred)
+%script(src="/javascripts/shBrushPlain.js" type="text/javascript" deferred)

doc-src/layouts/site.haml

@@ -1,5 +1,4 @@
 !!!5
-- # This template is just the stuff until the body tag.
 %html.no-js{:dir => "ltr", :lang => "en"}
   %head
     %meta{:charset => "utf-8"}/
@@ -9,10 +8,7 @@
     %title
       #{@item[:title]} | Compass Documentation
     %link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
-    %script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
+    = render "partials/js-core"
-    %script(src="/javascripts/jquery.cookie.js" type="text/javascript")
-    %script(src="/javascripts/site.js" type="text/javascript")
-    %script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
   %body.site{body_attributes(@item)}
     #wrap
       = render "partials/main-navigation"

doc-src/lib/data_sources/syntax_highter.rb

@@ -26,7 +26,7 @@ class SyntaxHighlighterFilter < Nanoc3::Filter
 
   def run(content, params={})
     doc = Nokogiri::HTML.fragment(content)
-    [:css, :sass, :scss].each do |format|
+    [:css, :sass, :scss, :html, :haml].each do |format|
       doc.css("pre.source-code.#{format}, code.#{format}").each do |el|
         el.set_attribute("class", "brush: #{format} "+el.attribute("class").value)
       end