Four simple Steps
- Open the code sample in your favorite editor (that would be vim)
- 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)
- Copy the generated CSS into the CSS file of your blog (in wordpress you’d get there via Appearance/Edit CSS)
- 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.
- Copy the code generated in step 2 from above to the clipboard
- Go to http://premailer.dialect.ca/
- Select Paste HTML as the source
- Paste your code into the text field
- In the Options check everything except Don’t remove <style> and <link> elements
- Hit Submit and copy the HTML results
- Include the copied HTML in your blog
