Blockquotes in Hugo

Hugo uses Markdown to create the content, which is then parsed into static HTML. One of the features of Markdown are quotes, like the following:

Never regret anything that made you smile. — Mark Twain

The above quote is a single line quote. Multiline quotes (block quotes) are possible, but they are not very intuitive.

What is a quote

A quote is often used when verbatim quoting a source, like from a book, another text, or what a person said.

Life is really simple, but we insist on making it complicated. — Confucius

In Markdown, this is written by starting the line with the quote with a greater-than sign (>). Easy enough.

The source for above quote in Markdown:

1

> Life is really simple, but we insist on making it complicated. -- Confucius

Multiline Quotes - Blockquotes

In Hugo, blockquotes are just a notch more complicated. Let’s take this quote by Douglas Adams. It’s maybe too long to write it in one line, therefore let’s break it into multiple lines. Makes for better readability.

Space is big.
You just won’t believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it’s a long way down the road to the drug store, but that’s just peanuts to space.
Douglas Adams

If you add the > sign in front of every line:

1
2
3
4

> Space is big.
> You just won't believe how vastly, hugely, mind-bogglingly big it is.
> I mean, you may think it's a long way down the road to the drug store, but that's just peanuts to space.
> Douglas Adams

You get the following result:

Space is big. You just won’t believe how vastly, hugely, mind-bogglingly big it is. I mean, you may think it’s a long way down the road to the drug store, but that’s just peanuts to space. Douglas Adams

This does not look very nice, and definitely not the multi-line output I am looking for.

The secret potion in Hugo is to add two spaces (<space><space>) after every line:

1
2
3
4

> Space is big.<space><space>
> You just won't believe how vastly, hugely, mind-bogglingly big it is.<space><space>
> I mean, you may think it's a long way down the road to the drug store, but that's just peanuts to space.<space><space>
> Douglas Adams<space><space>

This formats the output nicely into multiple lines:

Space is big.
You just won’t believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it’s a long way down the road to the drug store, but that’s just peanuts to space.
Douglas Adams

Exactly what I want!

What is Hugo

Hugo is a popular and open source static website generator. This blog is created using Hugo.

Development started around 2013, and the software is written in Go. The content of the website is written in Markdown, and then compiled into a website using the pre-defined layout. During development of new content, Hugo offers a life preview using the built-in server. It is very flexible, and offers a wide range of available themes and shortcuts.

Comments

With an account on the Fediverse or Mastodon, you can respond to this post. Known replies are displayed below:

Load Comments from Fediverse

Note: This will load data from mastodon.social.

Learn how this is implemented here.