Search My Blog

ruby (4) web (4) ruby on rails (3) security (3) GPG (2) OpenPGP (2) RFC (2) linux (2) rails (2) shell (2) sysadmin (2) Exchange (1) GIT. (1) IMAP (1) RCS (1) SSH (1) SVN (1) bundle (1) cURL (1) command line (1) crack (1) css (1) developer (1) email (1) fail (1) hack (1) http (1) mac (1) network (1) password (1) regular expression (1) script (1) subversion (1) terminal (1) textmate (1) tip (1) vim (1)

Tuesday, October 4, 2011

My CSS stylesheet for Ruby on Rails syntax highligthing

As my very first post, I would like to share with you the CSS stylesheet I use to format Ruby snippets.
If you need a CSS stylesheet ready to be applied to your html code block, or you simply like my ruby formatting color schema, you can take it!

div.rb-code {
 padding:1em 1em 1em 1em;
 border:0.2em groove #000000;
 font-family:Andale Mono,monospace;
 font-size:1.2em;
 color:#CC9900;
 background-color:#3A3A3A;
 overflow:auto;
 z-index:1;
}
div.rb-block-def {}
div.rb-block-exe {}
div.rb-code div.tab { padding-left:1.4em; }
div.rb-code .attribute { color:#FFFF66; }
div.rb-code .argument { color:#FFFF00; font-style:italic; }
div.rb-code .class-parent { color:#00FF00; }
div.rb-code .class { color:#FF00FF; font-weight:bold; }
div.rb-code .comment { color:#FFFFFF; }
div.rb-code .constant { color:#FF9966; }
div.rb-code .keyword { color:#FF8000; text-decoration:underline; }
div.rb-block-def .method { color:#FF00FF; }
div.rb-code .module { color:#A020F0; font-weight:bold; }
div.rb-code .number { color:#00FFFF; font-weight:bold; }
div.rb-code .regexp { color:#FF0000; }
div.rb-code .string { color:#99CCFF; }
div.rb-code .symbol { color:#CCFF66; }
div.rb-code .var { color:#FFFF66; font-weight:bold; }
div.rb-block-exe .command { color:#99CCFF; font-weight:bold; }
div.rb-block-exe .evaluation { color:#F0F0F0; font-size:0.8em; }
div.rb-block-exe .prompt { color:#CC9900; }

To use it, simply place all your code snippet between <DIV class='rb-code'>...</DIV>, and then wrap inside the appropriate <SPAN>...</SPAN> block the portions you need to highligth.

You can distinguish def blocks and executable blocks placing them inside a <DIV class='rb-block-def'> or a <DIV class='rb-block-exe'>

To ident a block, put it inside another <DIV class='tab'>

Look at the following example:

<DIV class='rb-code'>  
<DIV class='rb-block-def'>
<DIV><SPAN class='keyword'>class</SPAN> <SPAN class='class'>Person</SPAN></DIV>
<DIV class='tab'>
<DIV><SPAN class='keyword'>def</SPAN> <SPAN class='method'>speak_now</SPAN>(<SPAN class='argument'>thought</SPAN>)</DIV>
<DIV class='tab'>
<DIV>puts <SPAN class='var'>thought</SPAN></DIV>
</DIV>
<DIV><SPAN class='keyword'>end</SPAN></DIV>
</DIV>
<DIV><SPAN class='keyword'>end</SPAN></DIV>
</DIV>
</DIV>

it will be shown as:

class Person
def speak_now(thought)
puts thought
end
end

No comments:

Post a Comment

If you find this useful please leave a feedback :)