Skip to content
● Grav 2.2 is out: 2x faster cold starts and 96% less memory on big sites. Read the announcement →

Add CSS class to every element while rendering Markdown

theme

Solved by pamtbaau View solution

Started by Marco 6 years ago · 2 replies · 2215 views
6 years ago

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!

6 years ago Solution

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

Bulma doesn't work well with Markdown #1603

Summary:
Use content : https://bulma.io/documentation/elements/content/

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

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

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

👍 1
6 years ago

OMG I googled everything that came up in my mind except for a Bulma solution! 🤣
Thank you, this, combined with size helpers passed by Markdown Extra seems to be a good enough solution. 😎
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:

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by FrViPofm, 4 weeks ago
4 476 2 weeks ago
Themes & Styling · by johan thomas, 5 years ago
1 802 3 weeks ago
Themes & Styling · by stuart young, 2 months ago
3 662 2 months ago
Themes & Styling · by Sebadamus, 3 months ago
5 683 2 months ago
Themes & Styling · by martynfoster735, 3 months ago
1 642 3 months ago