How can I use classes or id's with kirbytext markdown

Kirby 3 Solved ✅
1

Is their anyway to use classes or id’s when markdown text inside Kirby?

Thank you

2

Hi odd_code,

On which elements would you like to add those?

Some of the default kirbytags have support for classes. If you want structural classes on certain elements, you can create your own kirbytag hook, and write your logic to add classes wherever you want them.

It’s opinionated, but only add id’s if you need on-page links (not for styling).

1 Like
3

:point_up_2:

If you enable Marrkdown Extra in your config, you can add classes to some types of content, but it’s limited to headers, fenced code blocks, images and links: PHP Markdown Extra

Since there are Kirbytags for images and links, that actually leaves you with headers and code blocks.

What are you trying to achieve?

4

I am trying to style unordered list and paragraph for different pages.

5

If you use different templates for these pages or the same template but assign the page id to a parent element, you could address these lists and paragraphs via this parent element, e.g.

<div class="somepage-text">
  <?= $page->text()->kt() ?>
</div>

CSS

.somepage-text ul {
  margin-left: 1.5rem;
}

.somepage-text p {
  color: green;
}
6

I typing unordered list in the textarea using the unordered button in the editor.

7

Yes, I understand that. Still, the above suggestion will work for all pages that use different templates/fields. Unless you want to apply different styles to lists within a single textarea field. Then even hooks will become difficult.

The last resort if everything else is not possible: use HTML inside your textarea.

For more control, you could replace your textarea field with a builder field: https://github.com/TimOetting/.

You could then define different fieldsets, with the possibility to add a class field to each set.

As you can see, there are quite a few different options and deciding which is the best approach depends on your specific requirements.

8

I usually do something like this on the body tag…

<body class="<?= $page->template() ?>-section <?= $page->uid() ?>-page">

This lets me add css to all pages with the same templates, whilst also allowing styles for a very specific page. Be aware that uid() can be changed, so if you need to be absolutly sure the class with never get changed, you can use something like the Autoid plugin.

9

@jimbobrjames, I think odd_code wants to let his editors alter classes on all possible elements in the textarea in the panel (I doubt if this is a good idea tbh). Your solution is kinda rigid and would result in all e.g.<ul> in this context to be styled the same…

And giving editors access to your CSS is also not a good idea imho :wink:

1 Like
10

I meant that he could style it up front based in the template… and i agree, letting editors mess with classes is asking for trouble. It was my take on one of @texnixe answers above.