How do you add a CSS class to a paragraph in Hugo

Question

I am new to Hugo, and I've been trying for over 30 minutes to get a class on a paragraph, but it isn't having it.

I am using TailwindCSS and I need to add some css classes to the paragraph tag.

CODE:

In my .md file I have

This is some paragraph text.
{.font-normal .text-lg}

According to the docs (scroll down a little bit) the above should work, but I get:

<p>This is some paragraph text.
{.font-normal .text-lg}</p>

What I actually want is:

<p class="font-normal text-lg">This is some paragraph text.</p>

What am I doing wrong? hugo version gives me hugo v0.105.0+extended linux/amd64 BuildDate=unknown

Hydrogeology

Answer 1

[Edit] My original answer appears below, but here's a better answer for anyone else who runs into this issue.

Hugo uses Goldmark to parse markdown, and by default it sets markup > goldmark > renderer > unsafe to "false." This means that if you mix HTML in with your markdown, hugo will throw an error instead of rendering the HTML.

If you change the "unsafe" setting to "true," hugo will render your HTML. You make this setting in your config.yaml file (or config.toml or config.json, whichever you're using). For info on how to apply this setting, see https://gohugo.io/getting-started/configuration-markup/#goldmark.

Note that when unsafe=true, you can break your page layout if you write bad HTML. Typically, though, you just want to throw in something like [div class="whatever"][/div]. Most people are smart enough not to screw that up.

[Original Response] This is actually kind of a pain in the ass. You need to create your own shortcode. In your Hugo project directory, create a file called attr.html in the following location:

/layouts/shortcodes/attr.html

Then put this in attr.html:

<p
    {{ if .Get "class"}}class="{{ .Get "class" }}"{{ end }}
    {{ if .Get "id" }}id="{{ .Get "id" }}"{{ end }}
    {{ if .Get "name" }}name="{{ .Get "name" }}"{{ end }}
    {{ if .Get "style" }}style="{{ .Get "style" }}"{{ end }}
>{{ .Inner }}</p>

Then, going back to your markdown file, do this:

{{< attr class=".font-normal .text-lg" >}}This is some paragraph text.{{< /attr >}}

You should end up with this output:

<p class=".font-normal .text-lg">This is some paragraph text.</p>

The shortcode above supports id, name, and style attributes as well. If you need more, you'll have to add them to the shortcode template. Also note that this template assumes you want "p" tags in your output.

Hymettus

And here's the root of the problem: Hugo uses Goldmark, as explained at gohugo.io/getting-started/configuration-markup/#goldmark. Then the Goldmark docs say "Currently only headings support attributes." See github.com/yuin/goldmark/#attributes. Seems like the Hugo docs are incorrect to say they support attributes on block elements. I tried it, and it doesn't work. – Hymettus

Thank you so much for taking the time to reply, this is indeed a massive pain. Most sites I build aren't that big (in terms of pages) so I think I'll go with Gatsby. – Hydrogeology

There is no need to insert HTML directly and enable unsafe. The desired behavour can be enabled by setting block = true under [markup.goldmark.parser.attribute] in the config.toml. See answer by @padaleiana. – Glennaglennie

Answer 2

Looking at the documentation, you can see that the default value for block in [markup.goldmark.parser.attribute] is false. You need to set that value to true:

config.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true

For example, this paragraph:

This is some paragraph text.
{.font-normal .text-lg}

is rendered with block = false like this:

<p>This is some paragraph text.
{.font-normal .text-lg}</p>

_{(like the example in the question)}

and with block = true like this:

<p class="font-normal text-lg">This is some paragraph text.</p>

Tested on Hugo v0.108.0+extended linux/amd64 BuildDate=unknown.

_{PS: There is no need to set unsafe = false in [markup.goldmark.renderer], in this case.}

Curious