Wolfmans Howlings

A programmers Blog about Programming solutions and a few other issues

Howto format ruby code for blogs

Posted by Jim Morris on Fri May 26 00:14:00 -0700 2006

How do I get that nice formatted ruby code inline?

Well if you are on typo trunk use this...

<script type='syntaxhighlighter' class='brush: ruby; gutter:true'><![CDATA[
   ...ruby code...

If you are not on typo trunk (which I am not yet) you can do the following...

I had to search around for this so I thought I'd put the recipe here.

I got most of my information from this site, you can also use this site to convert the code for you, but I found that more cumbersome than what I do below.

Basically all the hard work is done by the syntax gem install it as...

> gem install syntax

Then I use this little script called code2html.rb which converts the code in the clipboard and puts it back in the clipbboard...

require 'rio'
require 'rubygems'
require 'syntax/convertors/html'

if ARGV.size > 0
    code= File.read(ARGV[0])
    code= `dcop klipper klipper getClipboardContents`

convertor = Syntax::Convertors::HTML.for_syntax "ruby"
@code_html = convertor.convert( code )

puts @code_html

if ARGV.size > 0
    fn= "#{File.basename(ARGV[0], File.extname(ARGV[0]))}.html"
    rio(fn) << @code_html
    # put the results back on the clipboard, NB this may fail if there are shell specific characters
    system("dcop klipper klipper setClipboardContents \"#{@code_html}\"")

The clipboard stuff is kind of kde specific.

Alternatively you can specify a filename on the command line, and it will convert that file and put the results in a file with .html as the extension. (Note this requires the rio gem).

You will need this CSS available to your web page to render it nicely.

pre {
    background-color: #f1f1f3;
    color: #112;
    padding: 10px;
    font-size: 1.1em;
    overflow: auto;
    margin: 4px 0px;
          width: 95%;

/* Syntax highlighting */
pre .normal {}
pre .comment { color: #005; font-style: italic; }
pre .keyword { color: #A00; font-weight: bold; }
pre .method { color: #077; }
pre .class { color: #074; }
pre .module { color: #050; }
pre .punct { color: #447; font-weight: bold; }
pre .symbol { color: #099; }
pre .string { color: #944; background: #FFE; }
pre .char { color: #F07; }
pre .ident { color: #004; }
pre .constant { color: #07F; }
pre .regex { color: #B66; background: #FEF; }
pre .number { color: #F99; }
pre .attribute { color: #5bb; }
pre .global { color: #7FB; }
pre .expr { color: #227; }
pre .escape { color: #277; }

Posted in Ruby  |  Tags ruby,syntax,highlighting  |  10 comments


  1. rio4ruby@rubyforge.org said on Thu Sep 28 23:31:46 -0700 2006
    I like your use of Rio here. It illustrates well the reason for Rio's existence -- to make common I/O operations simple, so that one could spend their time writing code that does something worthwhile. With your approval, I would like to use this example in Rio's documentation -- with a couple of changes that illustrate some of Rio's functionality besides its copy operator:

      code= File.read(ARGV[0])
    could be replaced with
      code = rio(ARGV[0]).read


       fn= "#{File.basename(ARGV[0], File.extname(ARGV[0]))}.html"
       rio(fn) << @code_html

    could be replaced with

      rio(ARGV[0]).basename + '.html' < @code_html


  2. madcoderspeak.blogspot.com said on Mon Feb 19 10:38:28 -0800 2007
    Thanks a lot for this post..
    My blog ate a lot of my ruby code... had to use your script to make sure my blog doesn't do it again :D

    Cool post this one!
  3. Romulo A. Ceccon said on Thu May 03 05:35:14 -0700 2007
    Something might have happened to www.carldr.com. Neither the blog entry nor the convert tool is there anymore.

    Thanks for the tips, by the way.
  4. Brent said on Sun Dec 02 20:05:56 -0800 2007
    Thanks, this is really helpful. I had been wondering how people get their Ruby code to display so nicely on blogs. I've posted code on my blog at http://brentrubyrails.blogspot.com/2007/12/formatting-ruby-and-html-code-for-blog.html that uses Syntax for Ruby and HTML code, and copies it to the Windows clipboard.
  5. ritu sodhi said on Sun Mar 09 03:26:15 -0700 2008
    syntax/convertors/html The error comes that its unable to find convertor
  6. aidy_lewis said on Mon Apr 14 05:54:53 -0700 2008
    It doesn't seem that the ruby publishing code, syntax highlights. I could just use

  7. aidy_lewis said on Tue Apr 15 04:19:33 -0700 2008
    meant to say I could just use the code tag
  8. Andi Schacke said on Fri Oct 10 07:39:50 -0700 2008
    Thanks, great post. After implementing your tips I just realized that - if you're using TextMate as your editor - you can use the builtin function 'Convert Document to HTML'. I described how to do it [in this post](http://blog.andischacke.com/2008/10/code-syntax-highlighting-on-web-pages.html).
  9. EH said on Tue Jan 06 12:04:08 -0800 2009
    I would think that Rails developers could come up with a solution that didn't involve horizontal scroll bars. Too many times, blog posts contain code which is scrunched into a 40char textbox to preserve the precious page structure. However, this is an arbitrary constraint that does not aid usability.
  10. Tom said on Mon Feb 02 22:11:03 -0800 2009
    Maybe this can help you. It's a nice online source code formatter.It supports almost all of the popular program languages, such as Java, PHP, Ruby, C++ etc. And you can choose the theme you like and embed it into any web you want easily.You can take it a try here

(leave email »)