Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Add CSS class to every element while rendering Markdown

theme

Solved by pamtbaau View solution

Started by Marco 6 years ago · 2 replies · 2054 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 Sebadamus, 7 days ago
5 153 23 hours ago
Themes & Styling · by martynfoster735, 1 week ago
1 193 1 week ago
Themes & Styling · by Justin Young, 3 weeks ago
1 241 3 weeks ago
Themes & Styling · by Slebeig, 1 month ago
4 376 1 month ago
Themes & Styling · by Pedro M, 4 months ago
4 747 3 months ago