updated syntax styling to have nice headers for code windows

This commit is contained in:
B Mathis 2010-03-10 14:22:19 -06:00
parent 42251dddca
commit 16aab4abb2
7 changed files with 36 additions and 25 deletions

View File

@ -1,17 +0,0 @@
---
blog_title: My Octopress Blog
twitter_user:
tweet_count: 3
show_replies: false
delicious_user:
delicious_count: 3
full_url:
disqus_short_name:
google_custom_search_id:
google_analytics_tracking_id:
---

View File

@ -2,7 +2,7 @@
blog_title: My Octopress Blog blog_title: My Octopress Blog
author: author:
twitter_user: twitter_user: imathis
tweet_count: 3 tweet_count: 3
show_replies: false show_replies: false

BIN
source/images/code_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 B

View File

@ -2,6 +2,8 @@
layout: default layout: default
title: Syntax Highlighting Debug title: Syntax Highlighting Debug
--- ---
<div class="code_window">
<em>Ruby</em>
{% highlight ruby %} {% highlight ruby %}
def rebuild_site(relative) def rebuild_site(relative)
puts ">>> Change Detected to: #{relative} <<<" puts ">>> Change Detected to: #{relative} <<<"
@ -11,9 +13,12 @@ def rebuild_site(relative)
puts '>>> Update Complete <<<' puts '>>> Update Complete <<<'
end end
{% endhighlight %} {% endhighlight %}
</div>
So that's a small example. What about a big one? So that's a small example. What about a big one?
<div class="code_window">
<em>Ruby</em>
{% highlight ruby %} {% highlight ruby %}
require 'active_support/core_ext/array' require 'active_support/core_ext/array'
require 'active_support/core_ext/hash/except' require 'active_support/core_ext/hash/except'
@ -220,3 +225,4 @@ module ActiveRecord
end end
end end
{% endhighlight %} {% endhighlight %}
</div>

View File

@ -1,7 +1,7 @@
!page_pad = 30px !page_pad = 30px
!page_width = 980px !page_width = 980px
!sidebar_margin = 25px !sidebar_margin = 25px
!sidebar_width = 250px !sidebar_width = 280px
!default_border_radius = 4px !default_border_radius = 4px
html body html body
@ -23,7 +23,6 @@ html body
#page, #header, #footer, #nav #page, #header, #footer, #nav
min-width: #{!page_width} min-width: #{!page_width}
#page, #content, .content #page, #content, .content
+pie-clearfix +pie-clearfix
#content #content
@ -38,9 +37,9 @@ html body
#sidebar #sidebar
float: left float: left
width: #{!sidebar_width - !page_pad} width: #{!sidebar_width - !page_pad/2}
margin: 0 -100% 0 0 margin: 0 -100% 0 0
padding: #{!page_pad} 0 #{!page_pad} #{!page_pad} padding: #{!page_pad} 0 #{!page_pad} #{!page_pad/2}
#page.expanded #page.expanded
#content #content

View File

@ -1,3 +1,26 @@
.code_window
+border-top-radius(5px)
+border-bottom-radius(2px)
background: #aaa #{image_url("code_bg.png")} top repeat-x
position: relative
margin: .3em 0 1.3em
padding: 0 3px 3px
font-size: 14px
border: 1px solid #898989
border-top-color: #cbcbcb
border-left-color: #a5a5a5
border-right-color: #a5a5a5
em
text-align: center
+text-shadow(#ccc, 1px, 1px, 1px)
display: block
padding: 1px 0
color: #333
font-style: normal
+sans-font
.highlight
margin: 0
pre pre
color: #ccc color: #ccc
font-size: 13px font-size: 13px

View File

@ -2,9 +2,9 @@
p p
padding-bottom: 10px padding-bottom: 10px
a.topic a.topic
color= !twitter_topic color: #{!twitter_topic}
.meta .meta
color= !light_text color: #{!light_text}
font-size: 80% font-size: 80%
display: block display: block
padding: 8px 0 0 padding: 8px 0 0