Add Syntax Highlighted, Prettified Code to Your Blogger Blog

Before you can use Monky Pygment to copy pretty syntax highlighted code into your blogger blog, you'll need to copy the Pygments CSS, below, and paste it into blogger's template designer.  See my post on adding CSS to a blogger blog using the template designer.

<p><p><p><p><p><br /> </p></p></p></p></p>

For actually converting your code to HTML, watch this screencast or follow the steps below.

  1. With the CSS added to your blog, highlight the code you're interested in and copy it into your paste buffer.
  2. Now go to and paste your code into the text area there.
  3. Use the drop down box to select the language that your code is written in.
  4. Click on the preview button and verify the results of the syntax highlighting.  When you're satisfied, click the "Get HTML" button.
  5. Copy the HTML code from the text area.
  6. Go to the "Edit HTML" tab of your blog post and paste the HTML code that you just copied.
  7. Clicking on the "Compose' tab in blogger will give you an idea of the layout of your code, but to see how the syntax highlighting will work you have to click on the preview button.  Also note that blogger automatically changes angle brackets into HTML entity references.  That's a good thing, but if you look in the compose view of the blogger editor the entity references aren't displayed as the characters they represent.  Again the preview button down below will show what your post will really look like.
  8. That's it!  Finish your post and publish.
comments powered by Disqus