Wolfmans Howlings

A programmers Blog about Programming solutions and a few other issues

Howto format ruby code for blogs

Posted by Jim Morris on 2006-05-26 00:14:00 +0000

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...
]]></script>

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])
else
    code= `dcop klipper klipper getClipboardContents`
end

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
else
    # put the results back on the clipboard, NB this may fail if there are shell specific characters
    system("dcop klipper klipper setClipboardContents \"#{@code_html}\"")
end

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

Comments

  1. rio4ruby@rubyforge.org said on 2006-09-28 23:31:46 +0000
    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

    and

       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

    Cheers,
    -Christopher

      
  2. madcoderspeak.blogspot.com said on 2007-02-19 10:38:28 +0000
    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 2007-05-03 05:35:14 +0000
    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 2007-12-02 20:05:56 +0000
    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 2008-03-09 03:26:15 +0000
    syntax/convertors/html The error comes that its unable to find convertor
  6. aidy_lewis said on 2008-04-14 05:54:53 +0000
    It doesn't seem that the ruby publishing code, syntax highlights. I could just use
    <code>

    </code>
  7. aidy_lewis said on 2008-04-15 04:19:33 +0000
    meant to say I could just use the code tag
  8. Andi Schacke said on 2008-10-10 07:39:50 +0000
    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 2009-01-06 12:04:08 +0000
    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 2009-02-02 22:11:03 +0000
    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
    http://www.codetie.com.

(leave email »)