Hello,
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 }}
</div>
`
}
});
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.
