Skip to content

Avoid linebreaks in Hugo shortcodes

Shortcodes in Hugo are a neat and poweful system to avoid repating the same piece of text over and over again. Let's say I have the following text:

Nunc in odio id magna molestie congue. Donec erat nulla, pulvinar eget volutpat non, molestie at nisi. Curabitur nec tristique felis. Cras imperdiet, ante et vestibulum iaculis, tellus ipsum pulvinar felis, at viverra est tellus et eros. In nec dignissim lectus, bibendum hendrerit ex. Praesent lobortis eget justo non vehicula.

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit “amet” scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit “amet” erat nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In et imperdiet dui. In ut enim pharetra, blandit purus vel, malesuada est. Morbi sollicitudin eget leo nec dignissim. Praesent sed leo quis purus pretium aliquet sed quis arcu. Pellentesque facilisis tellus nulla, dignissim laoreet quam maximus et.

And I want to link the "amet" word, then I can create a shortcode:

layouts/shortcodes/amet.html

And in this shortcode I place the text:

<a href="https://www.lipsum.com/feed/html">amet</a>

In the Markdown source this is:

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit "{{< amet >}}" scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit "{{< amet >}}" erat nibh.

Pretty easy. However Hugo by default does a little bit too much: while generating the static content, it adds a line break. Which in the browser results in:

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit “amet ” scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit “amet ” erat nibh.
                                                                            ^                                                                                                         ^

There is a nasty little space between the word and the quotation mark. The generated HTML source shows the problem:

  <p>Nunc in odio id magna molestie congue. Donec erat nulla, pulvinar eget volutpat non, molestie at nisi. Curabitur nec tristique felis. Cras imperdiet, ante et vestibulum iaculis, tellus ipsum pulvinar felis, at viverra est tellus et eros. In nec dignissim lectus, bibendum hendrerit ex. Praesent lobortis eget justo non vehicula.</p>
<p>Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit &ldquo;<a href="https://www.lipsum.com/feed/html">amet</a>
&rdquo; scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit &ldquo;<a href="https://www.lipsum.com/feed/html">amet</a>
&rdquo; erat nibh.</p>

Usually a line break in HTML is not a big deal, the browsers deal with that. But here an unnecessary space is added while rendering the content. Hugo makes it complicated to avoid this problem. There is no default setting to turn this off, however the shortcode can have an extra Hugo tag to avoid the training linebreak:

<a href="https://www.lipsum.com/feed/html">amet</a>{{- / Strip trailing newline. / -}}

By adding the {{- -}}, the training line break is not included in the final HTML output, and the quotation mark comes right after the shortcode content.

  • Twitter
  • Bookmark Avoid linebreaks in Hugo shortcodes at del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • Digg Avoid linebreaks in Hugo shortcodes
  • Bloglines Avoid linebreaks in Hugo shortcodes
  • Technorati Avoid linebreaks in Hugo shortcodes
  • Fark this: Avoid linebreaks in Hugo shortcodes
  • Bookmark Avoid linebreaks in Hugo shortcodes at YahooMyWeb
  • Bookmark Avoid linebreaks in Hugo shortcodes at Furl.net
  • Bookmark Avoid linebreaks in Hugo shortcodes at reddit.com
  • Bookmark Avoid linebreaks in Hugo shortcodes at blinklist.com
  • Bookmark Avoid linebreaks in Hugo shortcodes at Spurl.net
  • Bookmark Avoid linebreaks in Hugo shortcodes at Simpy.com
  • Bookmark Avoid linebreaks in Hugo shortcodes at blogmarks
  • Bookmark Avoid linebreaks in Hugo shortcodes with wists
  • wong it!
  • Bookmark using any bookmark manager!
  • Stumble It!
  • Identi.ca

Public previews in Hugo

Hugo is a static templating system. It is (mainly) used to deploy websites/blogs which don't have and need dynamic content. The content of all pages is pre-generated, and the webserver delivers files from disk (or rather from cache, once files are loaded into memory). This approach allows for extremely fast websites, as no dynamic content is generated on every request.

While I know Hugo from work, I haven't really used it for private projects - until recently. I have started a new project where I present interviews with people behind the PostgreSQL Project - and this is perfect for a static website. Interviews don't change, once published.


There was just a little problem: every interview must be approved by the interviewed person. This requires a full preview, but one which does not show up on the main website, or the Sitemap, or the RSS feed. By default, even drafts show up in Sitemap and the RSS feed in Hugo.

 

Continue reading "Public previews in Hugo"
  • Twitter
  • Bookmark Public previews in Hugo at del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • Digg Public previews in Hugo
  • Bloglines Public previews in Hugo
  • Technorati Public previews in Hugo
  • Fark this: Public previews in Hugo
  • Bookmark Public previews in Hugo at YahooMyWeb
  • Bookmark Public previews in Hugo at Furl.net
  • Bookmark Public previews in Hugo at reddit.com
  • Bookmark Public previews in Hugo at blinklist.com
  • Bookmark Public previews in Hugo at Spurl.net
  • Bookmark Public previews in Hugo at Simpy.com
  • Bookmark Public previews in Hugo at blogmarks
  • Bookmark Public previews in Hugo with wists
  • wong it!
  • Bookmark using any bookmark manager!
  • Stumble It!
  • Identi.ca