Skip to content
Grav 2.1 is out: every page speaks Markdown. 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 · 2133 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, 18 hours ago
1 31 5 hours ago
Themes & Styling · by stuart young, 1 month ago
3 480 1 month ago
Themes & Styling · by Sebadamus, 2 months ago
5 481 2 months ago
Themes & Styling · by martynfoster735, 2 months ago
1 460 2 months ago
Themes & Styling · by Justin Young, 2 months ago
1 490 2 months ago