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