I 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.
