Apply html class to element

1

Hi,

I am wondering if there is a way to properly assign a custom class to a specific list-item?

In my content .md page, I am able to apply a custom class type to an h1 Header using the normal syntax:

# An Example {.important-li}

The renders as expected, applying the custom class important-li to the html h1 element

Screen Shot 2023-09-28 at 2.35.18 PM
Screen Shot 2023-09-28 at 2.35.18 PM954Ă—414 128 KB

However I can not seem to make this work on an li list-item? I have tried to syntax:

- An Example {.important-li}

as well as the alternative li tags of + and * but for some reason this always renders without the custom class being applied to the list-item?

Screen Shot 2023-09-28 at 2.37.43 PM
Screen Shot 2023-09-28 at 2.37.43 PM837Ă—343 49.5 KB

Does anyone know how I might apply a custom class to a list-item within my .MD file?

thank you very much for any suggestions or help.
@ed.p.may

2

Hugo supports markdown attributes on images and block-level elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables.

You cannot apply markdown attributes to list items (ordered, unordered, or description).

3

ah - ok, thank you @jmooring

best,
@ed.p.may

4

Clarification… you can apply a markdown attribute to a paragraph, even if it is within an li element. The blank lines and indentation are required.

markdown

list

- item one
  {.p-one}
  
- item two
  {.p-two}
{.list}

rendered

<p>list</p>
<ul class="list">
<li>
<p class="p-one">item one</p>
</li>
<li>
<p class="p-two">item two</p>
</li>
</ul>
1 Like