Custom preview - Layout markdown text


I’m trying to make a custom preview. Is there any way to layout markdown text in the preview ?

/site/plugins/custom-block/index.js in wich {{ content.contenu }} is a text written in markdown :

panel.plugin("lineaire/element-block", {
    blocks: {
      element: `
        <div class="element__content" @click='open'>
          {{ content.contenu }}

You would need a custom api endpoint that returns the rendered markdown, I think.

Is this solved? How did you do it?

Non, but now I would try with the GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.

@h2o You can find an example for using the API here: Block factory: Creating your own blocks collection | Kirby CMS

Thanks, is there a way to use the kirbytext() method inside vue, so i can make a computed prop with that?

Nope, the kirbytext() method is a PHP method that cannot be used inside JavaScript.

The library @Adrieng referred to is a JS library so you could use that to parse Markdown client side, but it wouldn’t support KirbyText, just Markdown.

Thanks for your answer. I actually know all this, that’s why the question came up: How to parse markdown in a block plugin? As it does not export a js module, but is a plugin to the panel property, I do not see a way to import the marked library easily. I thought that maybe there is an easy way as markdown/kirbytext is the default kirby way to format text in a textarea field. How would you do it?

What I don’t understand: Blocks are the kirby way of dealing with different types of content, and textarea are the most basic block types, why is markdown not supported by default? Or do I oversee something?

I wouldn’t say that. While there is a markdown block, it comes without a preview (I think it’s mainly there to support markdown if needed). But basically, you would usually use a text field (which is a writer field) inside a block, not necessarily a textarea field.

I see the main use case of the blocks field as a replacement for markdown.

I think there is a good reason why blocks and layouts fields exists, simply because one cannot do more complex layouts with markdown. therefor blocks must be more than a replacement for markdown.

I am also wondering, because in the official docs you see that the blocks do have parsed markdown in the preview. compare the first image here: Blocks | Kirby CMS

how can i achieve this with a custom block?

The default blocks don’t use markdown fields but the writer field, so there is no preview for markdown.

Okay I understand.

When I search the source file of that block in /getkirby/cms/config/blocks/markdown I see that there is only a php file which parses the block with ->kt().
The explanation though to build a block relies on js: Blocks | Kirby CMS

So again, how is it possible to use a php snippet in a block like the kirby default block is doing? There must be a way, no?

What do you mean? The php snippet you are referring to is for rendering the block in the frontend. The preview for the markdown block is in /kirby/panel/src/components/Forms/Blocks/Types/Markdown.vue and this preview doesn’t render Markdown/Kirbytext.

Also, if you’d try to render markdown with a client side library, the downside would be that it wouldn’t support Kirbytext, but only Markdown. So a route to render Markdown is IMO your best option.

I see, my bad, I mixed this up.

What I understand is that you say that blocks do not render Markdown/Kirbytext, not the default blocks and not the custom blocks. But what I see is that in the docs markdown is parsed…?

As I already said above, what you see there is a writer field (in the text block type), not a markdown field. I don’t know why you think that what you see there is Markdown.

Okay, now I see what caused the confusion. It was the naming of the default blocks and my (wrong) preassumption which fields they hold)
Because there is no »Writer«, but a »Markdown«, I assumed »Text« to be plain and »Markdown« to be rich…

Thanks for the patience.