Monthly Archives: June 2013

How to Enable Curly Quotes in Jekyll

Curly vs Straight QuotesI recently migrated one of my blogs from WordPress to Jekyll and painstakingly ported my custom theme to the new blog engine. I didn’t notice it at first, but Jekyll makes a major typographic faux pas by default: it uses ugly, straight “typewriter quotes” instead of converting them to proper “curly quotes.” (Sometimes you’ll see them referred to as “smart quotes.”)

For the uninitiated, straight quotes are a relic from the old days of mechanical typewriters. Rather than have separate keys for the opening and closing marks, they instead used a single key that functioned as both. The single-quote glyph also sometimes served as half of an exclamation point on some models, which would be produced by pressing the backspace key and typing the single-quote over a period.

I’m sure that must have been a constant annoyance to professional typesetters, just like seeing signs printed in Comic Sans today…

History lesson aside, what can we do about Jekyll’s carefree attitude about quotation marks? We could type them manually, memorizing our preferred operating systems’ keyboard sequence to produce proper quotes. But that’s not much of a solution, is it? Shouldn’t a blog engine designed to wrangle Markdown into HTML automatically replace straight quotes for us?

I have good news: it can do just that, and it’s a simple matter of editing the _config.yml file.

Jekyll can use more than one Markdown parser in its build process, and the default one (Maruku) is the most basic of the bunch. If you switch to RDiscount, which has a few advantages, you can enable the SmartyPants plugin, which automatically substitutes proper typographical characters for ones that are easier to enter on a keyboard. (Typewriter quotes become curly quotes, triple-dashes become em-dashes, etc.)

First, you need to install RDiscount.

gem install rdiscount

Now add the following lines to _config.yml:

markdown: rdiscount
rdiscount:
extensions: ['smart']

This switches the Markdown parser to RDiscount and enables the “smart” extension, which should enable smart quotes in your post content. Yay!

Now there’s one problem remaining: this doesn’t do anything for post titles. It only affect the main content. You need to edit your templates to make them Markdown-ready. You need to hunt down every instance of {{ page.title }} and {{ post.title }} and apply the markdownify filter. For example:

<h2><a rel="bookmark" href="{{ page.external-url }}">{{ page.title | markdownify }}</a></h2>

With that change in place, you should get your proper typography in your post titles as well.

Solar: A Jekyll Theme Based on the Solarized Color Palette

I’ve been having fun playing around with Jekyll and Ruby lately, which has lead to a sudden increase in the number of repositories on my GitHub profile. After converting my personal blog and porting its theme over, I thought it would be fun to…

DigitalOcean Review

Since the beginning of April, this site has been hosted by DigitalOcean. I’ve been a longtime customer of VPS.net—from September of 2009 up until April of 2012—but the difference in service was so huge that I had to switch. While VPS.net was a good…

BlogBuzz June 8, 2013

CDNJS: The Missing CDN

The Google CDN is an awesome way to speed up page load times, but it only has a few of the most popular JavaScript libraries. That’s what CloudFlare is aiming to rectify with their CDNJS. They have a ludicrously long list of libraries—JavaScript, CSS,…