updated syntax style, added javascript for expanding code blocks

This commit is contained in:
B Mathis 2009-11-12 10:19:36 -06:00
parent 790d5a447c
commit 1eddd60a71
6 changed files with 75 additions and 20 deletions

View File

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

View File

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

View File

@ -2,7 +2,7 @@
layout: default
title: Syntax Highlighting Debug
---
{% highlight ruby linenos %}
{% highlight ruby %}
def rebuild_site(relative)
puts ">>> Change Detected to: #{relative} <<<"
IO.popen('rake generate') do |io|
@ -10,10 +10,11 @@ title: Syntax Highlighting Debug
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'

View File

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

View File

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

View File

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