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

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

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 · 1891 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 Pedro M, 2 months ago
4 198 2 months ago
Themes & Styling · by Ian, 2 months ago
3 94 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 455 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 48 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 128 3 months ago