Aug 172009
 

When I first started this blog, I was surprised (and disappointed) that Google’s Blogger platform didn’t have some nice built-in feature for code formatting and syntax highlighting. I experimented with a number of third-party solutions, but didn’t find anything that I particularly liked, so my posts have had some ugly-looking code in them. Until now.

…Well, until my previous post, anyway.

A then-coworker told me a while back about vim’s :TOhtml feature, but it wasn’t until last night that I actually checked it out. As it turns out, it was just what I was looking for. Out of the box, it’s a little cumbersome for my purposes, but a little vim scripting helped a lot.

Default Behavior

To start, I set a few options in my .vimrc:

let html_use_css = 1 ” Use stylesheet instead of inline style
let html_number_lines = 0 ” don’t show line numbers
let html_no_pre = 1 ” don’t wrap lines in

I also choose a vim color scheme I like (wombat). You can look through examples of tons of schemes here. (I spent a while trying to figure out why I couldn’t set the color scheme (after I downloaded it to .vim/colors/), and the answer I found was that color schemes only work in gVim.)

So, having set some options in my .vimrc, and chosen a colorscheme in gVim, calling :TOhtml on

class Person
  attr_accessor :age

  def speak
    "Hi!"
  end

  def say_age
    "I am this many: #{| * @age}"
  end
end

gives:

http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>~/demo.rb.htmltitle>
    <meta name="Generator" content="Vim/7.2">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
      
  • Pin It
  •   9 Responses to “Vim — :TOhtml & Customization”

    1. Very nice. One (minor) downside of using CSS vs. inline styles is that the coloration doesn't make it through to feed readers. But I'm used to viewing the original when code is present, so that isn't such a big deal.

    2. Also, you seem to have lost the indentation (non-breaking spaces) in your ruby example. perhaps retaining the pre would solve that?

    3. nevans — Thanks for the heads up about the indentation. I had written this post as I developed my vimrc, and the snippet in question actually had been generated with html_no_pre unset. For some reason, not setting that option means you won't get nbsp's for spaces (and the css doesn't manage indentation, either). I regenerated that snippet with the version of my vimrc represented in the post, and now it looks better :)

      As for the the lack of CSS in readers, I hear ya. I'm ok with it, though. I'm like you — if a post in Google Reader looks funky, I just click on the link.

    4. nevans — Oh, after regenerating the snippets, RSS readers now correctly show the indentation (because I'm now using nbsp's). It doesn't have colors, but I think it's much more readable now (with indentation) that it was before.

    5. Thank you, this is exactly what I needed.

    6. VIM is powerful editor. Thx for above post.

    7. Finally i quit my day job, now i earn a lot of money
      on-line you should try too, just search in google
      - bluehand roulette system

    8. I see a lot of interesting articles on your blog.
      You have to spend a lot of time writing, i know
      how to save you a lot of work, there is a tool that creates readable, google friendly articles in couple of minutes, just search in google – k2 unlimited content

    9. I read a lot of interesting content here. Probably you spend a lot of time
      writing, i know how to save you a lot of work, there is an online tool that creates
      high quality, google friendly articles in seconds, just search in google
      - laranitas free content source

     Leave a Reply

    (required)

    (required)

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>