updated syntax style, added javascript for expanding code blocks

source/_layouts/default.haml

@@ -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")

source/javascripts/octopress.js

@@ -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);
+  });
+}

source/test/syntax.markdown

@@ -2,18 +2,19 @@
 layout: default
 title: Syntax Highlighting Debug
 ---
-{% highlight ruby linenos %}
+{% highlight ruby %}
-  def rebuild_site(relative)
+def rebuild_site(relative)
-    puts ">>> Change Detected to: #{relative} <<<"
+  puts ">>> Change Detected to: #{relative} <<<"
-    IO.popen('rake generate') do |io|
+  IO.popen('rake generate') do |io|
-      print(io.readpartial(512)) until io.eof?
+    print(io.readpartial(512)) until io.eof?
-    end
-    puts '>>> Update Complete <<<'
   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'

stylesheets/_layout.sass

@@ -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

stylesheets/library/_typography.sass

@@ -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)

stylesheets/partials/_syntax.sass

@@ -2,21 +2,38 @@ pre
   color: #ccc
   font-size: 13px
   background: #222
-  padding: 0 15px 0 0
+  line-height: 1.5em
-  line-height: 1.625em
   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
+      padding-top: 15px
-    &:last-child
+      display: inline-block
-      padding-bottom: 12px
+
+.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