Fenced Code Block with Class

Hey there,
is it possible to have the fenced code block have a class?
What I want to achieve is to have half- and full-width code blocks – which I thought would be easy to solve with an assigned class.

What do you mean with fenced code block?

Special attributes for certain elements like fenced code blocks are available if you enable Markdown Extra in your config.

https://michelf.ca/projects/php-markdown/extra/#spe-attr

Oh I see, thanks! Maybe kirbytags hooks can help out here?

What I suggested above, doesn’t seem to work with Parsedown, though. :thinking:

Markdown calls code blocks which are not inline fenced code blocks. They start and end with three backticks ( ` ).

No no, it indeed works, @texnixe! : )
But it also completely destroys everything else :sob:
I now get no auto paragraphs anymore, every markdown styling (like italic via underscores) is broken, etc.

I’m using <?= $page->text()->kt() ?> in the template. Any idea why this happens?

Hm, I don’t know.

If I add this in a text file

    bla bla bla

    ``` {.myClass}}
    <?= $page->title() ?>
    ```

    bla bla bla

The result is

   
<pre><code class="language-{.myClass}">
<?php echo $page->title() ?>
</code></pre>
   

And the class does not show up at all when adding the language to the block like this:

    bla bla bla

    ```php  {.myClass}
    <?= $page->title() ?>
    ```

    bla bla bla

Could you post what you tried?

I was too happy too early – my bad! :weary:
You’re right indeed. It doesn’t seem to work. (I just tried it with a heading…!)

So, I’ve looked: It’s a bug in Parsedown Extra. In general it seems to me not really well maintained.

There is a Parsedown Extra Plugin, which solves this. But it’s unclear to me, how I should utilize that correctly (if even possible at all).

Yes, headings are no problem.

What you could try is to use another Markdown parser (but you would have to make sure it supports all you need and performs well). There is an issue on GitHub discussing alternatives to the Parsedown parser: https://github.com/getkirby/kirby/issues/1961. You might want to try out one of the alternatives mentioned there (after reading the discussion).

Edit: I guess you could als use the Parsedown Extra plugin in a plugin to override Parsedown Extra.

Okay, thanks anyway. Luckily this feature is just the icing on the cake. But right now for me this is dead.

What really puts me off, is that Markdown Extra breaks your markdown if you put any HTML in your Markdown.
I e.g. require <section>'s. I can add this without problems, but when MD Extra is on, everything in those section blocks gets treated like it would be in a <pre> container (like the italics are not italic but still have those underscores).

To sum it up: nothing really works here. Weird that there is not a single well working parser out there…

You might want to test the Editor plugin for sections instead of putting HTML into your textareas? Also, instead of HTML, you could use custom tags or custom KirbyTags.

What you could do, even without Markdown Extra enabled:

    ```php-myClass
    // code here
    ```

Will render

<pre><code class="language-php-myClass">
<?php echo $page->title() ?>
</code></pre>

As always, nice to see how you can come up with more ideas – thanks! (:

I’m not really quite the panel editor user anyway; just using my favorite text editor. And I kinda like to see the input raw.
A custom tag could be a thing, yes. But on the other hand there is not really any advantage: I would still need one where I open the section and one tag where I close it. This just seems to be an unneccessary extra layer here for me.

True, could be a workaround. But I’m having a library which provides proper syntax highlighting and this would mess with it and I really can’t be bothered to now hack that thing there :smile:
But again, thank you so much!

I agree, that wouldn’t make sense. A hook like suggested by @bvdputte could be a solution to fix this and add the additional class. But hey, if it is not that important…

If you want half-width code blocks so as to put text beside it, the columns plugin could be an alternative as well.

Maybe you have to put it after the code block?

```
<?= $page->title() ?>
``` {.myClass}

Nah, sadly doesn’t work either. ):