Using .Inner shortcode to add style

support
1

I’ve recently upgraded to the newest version of Hugo, and tried to follow along on the shortcode discussions, but I’m unsure how to do this.

In my content file, I have a blog post. Everything is written in markdown, there is no html. For one particular paragraph, I’d like to add an html div with custom styling. I’m using the tailwinds framework.

Markdown file:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

{{< blog/style "bg-red" >}}
Ut enim ad minim veniam, quis nostrud exercitation.
{{< /blog/style >}}

Duis aute irure dolor in reprehenderit in voluptate.

My shortcode:

<div class="{{.Get 0}}">{{ .Inner | markdownify}}</div>

The above works, but an empty div is created in the html output around the entire blog post. If I change the shortcode to:

<div class="bg-red">{{ .Inner | markdownify}}</div>

and change it as well in the blog post, {{< blog/style >}}, the entire blog post gets the div styling.

So I’m a bit confused, as I thought by closing the shortcode, it would only apply to a particular section of my content.

2

If you share a repo per Requesting Help, someone can clone it and see what’s going on. :slight_smile: