Getting Quotes Right in Hugo

Author's Avatar

Author: Kajus

| 2 minutes read

Quotes

It's November, so it's dark, cold and gloomy. That's when there's more time and will to get back to the blog, which has accumulated some dust. I opened the website, but the first thing I saw was one old problem that always annoyed me - the quotes, which were not displaying correctly. This was always at the top of the website's tech issues backlog. Here's how I finally fixed it this evening.

The Problem of Quotes Link to this section

This is how it looked like:

Bad quote

Call me pedantic, but this is not the aesthetic I want. Ain't I particular about my quotes?

At first, I thought this was related to smart quotes on Mac, but checking the settings confirmed that I've disabled this "smartness" already a long time ago. I've tried editing the Markdown file with a couple of different editors, including nano, just to be sure. That did not help. I tried viewing the page on other operating systems, see how it is displayed there, but it was all the same. This is where I started to suspect that I might want to change the way the quotes are encoded to HTML. The HTML entity used was ’, which is potentially not something that I wanted.

The Solution Link to this section

Luckily, this kind of configuration is available in Hugo, which uses the Goldmark Markdown renderer by default. After a quick glance at it I found the exact entity that I wanted to replace with mine - so I appended this configuration to Hugo's config.toml file:

1
2
3
4
5
6
[markup.goldmark.extensions.typographer]
        apostrophe = '''
        leftDoubleQuote = '"'
        leftSingleQuote = '''
        rightDoubleQuote = '"'
        rightSingleQuote = '''

The HTML files were rebuilt and the quotes changed to the way they should be, as you can see: 'single', "double". VoilĂ .