Tangible Bytes

A Web Developer’s Blog

Hugo Markup Attributes

I have been blogging since about 2005 and been through several different platforms in the process

Using a Static Site Generator with content in Markdown is awesome for low maintenance and content portability.

If I move platform it shouldn’t be hard to migrate the content and to that end I want to keep the my posts fairly pure Markdown - but it can be a bit limited.

How do I add some classes to change how it looks?

Hugo supports adding attributes (e.g. CSS classes) to Markdown blocks, e.g. tables, lists, paragraphs etc.

I use configure markup to add class attributes and combine it with Bootstrap utility classes

I also allow myself to write a little html in my content

      unsafe = true

Then in my default archetype I have

<div class="clearfix">



Hugo renders my image as

<p class="float-left"><img src="/default.png" alt=""></p>

and leaves the wrapping html intact

The combination of being able to add a class and Bootstrap utilities is quite powerful.

I’d like to find a way to avoid the HTML in my content - and wrap the into automatically.

Also worth noting is Hugo’s render hooks