Add CSS class to every element while rendering Markdown

Support Themes & Styling
1

Hello,

I dug deeply into Documentation and unfortunately found no hint to what I need (and think could be very useful).
I am developing a template based on Bulma CSS framework and I need to add a specific class, for example, to every <h1> HTML tag.
Markdown Extra could be used but as you can imagine, it’s not ideal to assign a class to every line you write, right?
Please help with a viable solution or we will be stuck to certain CSS framworks.
Ideally, classes should be assigned in the frontmatter in order to make the solution completely customizable.

Thank you!

2

@phmg701, A Google query yielded the following issue on the Bulma repo:

Bulma doesn’t work well with Markdown #1603

Summary:
Use content : Content | Bulma: Free, open source, and modern CSS framework based on Flexbox

A single class to handle WYSIWYG generated content, where only HTML tags are available

<div class="content">
  <!-- Generated markdown here -->
</div>

In Twig you could use that to wrap {{ page.content | raw }}

1 Like
3

OMG I googled everything that came up in my mind except for a Bulma solution! :rofl:
Thank you, this, combined with size helpers passed by Markdown Extra seems to be a good enough solution. :sunglasses:
I just approached this CSS framework and I love it, although Documentation isn’t that complete or easy to understand. Of course one can dive into SASS but it’s time and resource consuming.
Thank you!!! :1st_place_medal: