Cannot apply CSS to the `.verse` class exported from Org Verse blocks

[kaushalmodi]

Minimum reproducible export

Below Org snippet:

#+begin_export html
<style>
  .verse {
    color: red;
  }
</style>
#+end_export

#+begin_verse
Great clouds overhead
Tiny black birds rise and fall
Snow covers Emacs

    -- AlexSchroeder
#+end_verse

exports to this Markdown:

<style>
  .verse {
    color: red;
  }
</style>

<p class="verse">

Great clouds overhead<br />
Tiny black birds rise and fall<br />
Snow covers Emacs<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;-- AlexSchroeder<br />

</p>

But the HTML generated by Hugo looks like:

<style>
  .verse {
    color: red;
  }
</style>

<p class="verse">
<p>Great clouds overhead<br />
Tiny black birds rise and fall<br />
Snow covers Emacs<br />
<br />
    &ndash; AlexSchroeder<br /></p>
</p>

What's the issue

The .verse class is not rendered in red color.

Notice this part:

<p class="verse">
<p>Great clouds overhead<br />

This is a problem because Hugo wraps the inside of <p class="verse"> .. </p> in another <p> .. </p> tag. When that nested <p> starts, it ends the scope of the outer <p class="verse"> tag. So any CSS applied to p.verse or .verse will not get applied to the actual Verse content in the inner <p> tag.

Reference

@pdcawley

https://github.com/pdcawley/bofh.org.uk/commit/2a92c7cfdee34544947a40c49f89313396d41fba

[kaushalmodi]

The issue is definitely with the Hugo HTML generator, but it's a known behavior for quite some time.. that the markdown parser wraps the parsed text in <p> tags.

But the fix seems easy from our side .. just export the verse blocks in <div> tags instead of <p> tags.

[kaushalmodi]

CSS required before this fix

p.verse + p {
  ..  
}

CSS required after this fix

.verse {
  ..  
}