ikkez/FatFreeFridge — pull request #3 by ssokolow (2012-06-03 08:21:34+00:00)
Title: Conversion to Jekyll+Pygments server-side syntax highlighting

Here's a conversion from Google Code Prettify to Jekyll's Pygments support for your examination. Until I get a feeling for how strongly you feel about various changes, I'll probably stick with pull requests for submitting changes. (I'm generally a risk-averse person and ascribe to a "better to ask permission than risk begging forgiveness" approach to things.)

As before, you can check out the version in the pull request at http://ssokolow.com/FatFreeFridge/ (Depending on your browser and how long it's been, you may need to force the CSS to be reloaded by shift+clicking or ctrl+clicking your Reload button)

It's using the default Pygments color scheme but Pygments comes with 18. If you want to play around with them without having to install Pygments, all but "monokai" are available at https://github.com/richleland/pygments-css

I didn't use line numbers because Pygments generates them in a way that gets them caught in copy-paste operations. I could probably find a way to fix that, but I'm not really sure they're more than a distraction when working with such small snippets.

Also, if you want a list of the different markup formats Pygments supports, check http://pygments.org/docs/lexers/ (The "Short names" field for each tells you what to put in the Jekyll highlight tag)

I also changed the `margin-bottom: 18px;` line for highlighted blocks of code to `margin-bottom: 3ex;`. It's generally a good idea to use units relative to the user's font size when setting margins and padding near text. (Because it's the relationship of the sizes that matters, not the absolute size.)

**Also, very important,** I took the liberty of digging up an interesting CSS trick I'd run across and reformatted the recommended folder structure in the "Your Start" section of Examples. You'll definitely want to take a look at it now. (This is the main thing you might need to force a re-download of the CSS for)