@@ -33,6 +33,7 @@ google_analytics: true

         var tweet_count = #{page.tweet_count};

       %script(src="/javascripts/mootools-yui-compressed.js" type="text/javascript")

       %script(src="/javascripts/mootools-1.2.4.2-more.js" type="text/javascript")

+      %script(src="/javascripts/octopress.js" type="text/javascript")

       %script(src="/javascripts/twitter.js" type="text/javascript")

     - if page.respond_to? :google_analytics

       %script(src="http://www.google-analytics.com/ga.js" type="text/javascript")

new file mode 100644

@@ -0,0 +1,34 @@

+window.addEvent('domready', function() {

+  addPreExpanders();

+});

+

+function addPreExpanders(){

+  $$('div.highlight').each(function(div){

+    addExpander(div);

+  });

+}

+function addExpander(div){

+  new Element('span',{

+		html: 'expand »',

+		'class': 'pre_expander',

+		'styles': {

+      'display': 'block'

+    },

+    'events': {

+      'click': function(){

+        toggleExpander();

+      }

+    }

+	}).inject(div, 'top');

+}

+function toggleExpander(){

+  var html = '';

+  if($('main').toggleClass('expanded').hasClass('expanded')){

+    html = '« contract';

+  } else {

+    html = 'expand »';

+  }

+  $$('div.highlight span.pre_expander').each(function(span){

+    span.set('html',html);

+  });

+}

\ No newline at end of file

@@ -2,18 +2,19 @@

 layout: default

 title: Syntax Highlighting Debug

 ---

-{% highlight ruby linenos %}

-  def rebuild_site(relative)

-    puts ">>> Change Detected to: #{relative} <<<"

-    IO.popen('rake generate') do |io|

-      print(io.readpartial(512)) until io.eof?

-    end

-    puts '>>> Update Complete <<<'

+{% highlight ruby %}

+def rebuild_site(relative)

+  puts ">>> Change Detected to: #{relative} <<<"

+  IO.popen('rake generate') do |io|

+    print(io.readpartial(512)) until io.eof?

   end

-  

+  puts '>>> Update Complete <<<'

+end

 {% endhighlight %}

-{% highlight ruby linenos %}

+So that's a small example. What about a big one?

+

+{% highlight ruby %}

 require 'active_support/core_ext/array'

 require 'active_support/core_ext/hash/except'

 require 'active_support/core_ext/object/metaclass'

@@ -87,9 +87,9 @@ html body

       right= "1px solid" !page_border_sides

 #main

   width= !page_width - !sidebar_width - !sidebar_margin

-

-#main

   float: left

+  &.expanded

+    width: 100%

 #footer

   position: relative

@@ -17,6 +17,8 @@

   font-family: Georgia, Times, "Times New Roman", serif

 =fixed-font

   font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace

+=mono-font

+  +fixed-font

 =general-typography(!font_size = !base_font_size)

   +set-heading-sizes(!font_size)

@@ -2,21 +2,38 @@ pre

   color: #ccc

   font-size: 13px

   background: #222

-  padding: 0 15px 0 0

-  line-height: 1.625em

+  line-height: 1.5em

   border: #aaa 1px solid

   overflow-x: auto

+  padding: 25px 20px

   .lineno

     color: #888

     background: #e3e3e3

-    position: relative

-    line-height: 180%

     display: inline-block

-    padding: 0 10px

+    padding: 0 0 0 10px

     &:first-child

-      padding-top: 12px

-    &:last-child

-      padding-bottom: 12px

+      padding-top: 15px

+      display: inline-block

+

+.highlight

+  position: relative

+  .pre_expander

+    +mono-font

+    font-size: 10px

+    text-align: right

+    padding: 4px 8px

+    line-height: 150%

+    position: absolute

+    cursor: pointer

+    top: 2px

+    right: 2px

+    +border-bottom-left-radius

+    display: block

+    color: #777

+    background: #333

+    &:hover

+      background: #444

+      color: #ccc

 // based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css

 .editor

@@ -41,7 +58,7 @@ pre.console

     color= lighten(#008000, 75)

 .highlight

-  padding: 0.5em

+  padding: 0 0 0.1em

   color: white

   // Comment

   .c