How to make your code samples in your blogs look like they look in Vim

Four simple Steps

  1. Open the code sample in your favorite editor (that would be vim)
  2. Execute :TOhtml (this generates a complete html file including a <style> section that contains the needed CSS and a <body> section that contains the HTMLversion of your code)
  3. Copy the generated CSS into the CSS file of your blog (in wordpress you’d get there via Appearance/Edit CSS)
  4. Include the generated HTML body in your blog

I haven’t tried this, but alternatively you could just copy the entire html (including the <style>) into your blog and thus combine steps 3 and 4.

The disadvantage of that approach is that in this case you’d have to include the CSS part in every blog that has a code sample.

If you don’t want to upgrade

In case you don’t want to pay the $15/year for the Custom CSS upgrade, scrap steps 3 and 4 and instead do the following in order to inline the CSS.

  1. Copy the code generated in step 2 from above to the clipboard
  2. Go to
  3. Select Paste HTML as the source
  4. Paste your code into the text field
  5. In the Options check everything except  Don’t remove <style> and <link> elements
  6. Hit Submit and copy the HTML results
  7. Include the copied HTML in your blog

  1. Reading Source Code on iPad with syntax highlighting « Thorsten Lorenz
  2. Reading Source Code on iPad with Vim syntax highlighting » Lab49 Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: