Styling different sections of the markdown content

support
1

Hey guys!

I’ve been using Hugo for my website for a while now. This is an awesome community that has helped me a lot over the development of my website.

Got stuck while revamping my website – I’m looking for a way to style the HTML & CSS different sections of my blog post.

For example:

This is what my markdown content file looks like:

# Introduction
Section 1......

# Problem
Section 2........

# Solution
Section 3.......

And I want my outputted HTML to look like:

<div class="introSection" style="background-color: blue">
<h1> Introduction </h1>
<p> Section 1.... </h1>
</div>

<div class="problemSection" style="background-color: red">
<h1> Problem </h1>
<p> Section 2.... </h1>
</div>

<div class="solutionSection" style="background-color: white">
<h1> Solution </h1>
<p> Section 3.... </h1>
</div>

Any leads on how to recreate a structure like this would be greatly appreciated!

2

You could achieve this with shortcodes.