Code examples of replaced tags

Kirby 3 Solved ✅
1

I’ve adjusted a code example, as suggested by @texnixe, to replace some custom tags instead of using <div markdown="1" class="some-class"> which is great and indeed much more user friendly.
Now I’m making some code examples which obviously only display properly when I use some extra space. How can I prevent replacement when tags are wrapped in (or start) with ~~~ .
It’s a bit silly to add notes with every example to omit extra whitespace :wink:

'hooks' => [
      'kirbytags:before' => [
        function (string $text = null, array $data = []) {
          return preg_replace_callback('!<(warning|info|box|inline)>(.*)<\/(warning|info|box|inline)>!siU', function (array $matches) use ($data) {
            $type = $matches[1];
            $block = '<div class="' . $type . '" markdown="1">';
            $block .= $this->kirbytext($matches[2], $data);
            $block .= '</div>';
            return $block;
          }, $text);
        },
      ]
    ]

Code example with extra whitespace to prevent replacement:

<box >
Display text in a box.
</box >
2

One way would be to use an entity in the code example but can’t use prism and have to wrap the example in <pre>

&lt;box>
Wrapping any text in a box.
&lt;/box>
3

I dont think you need to use the tag at all. You can use fenced code blocks. https://www.markdownguide.org/extended-syntax/#fenced-code-blocks

I think it will throw a class on it if you do this:

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
4

I don’t think I made it clear I’m using:

  ~~~markdown
     <box>
       Text in a box
     </box>
  ~~~

To show examples but <box> is replaced

5

I think you have to wrap it manually in pre tags.

6

Yeah, like I found out, no easy adjustment of the code snippet, I guess?
Prevent replacement when in ~~~

7

I don’t know, it’s done manually in our styleguide, don’t know if that’s just being lazy or if there really is no easy other way.

On a side note, you don’t need markdown=1 in your div.

8

I dont know how much work it would involve to refactor your site but, you might try the Editor plugin. It has code blocks built in.

9

Lazy can be good :slight_smile:
No markdown=“1”? Ok, I will try …

10

Hmmm, I’m working on a theme and I have to play with the editor first and one of the good things about Kirby as I write somewhere is: “No quirky Wysiwig editor just text” :wink:

11

Fair enough…its awesome though! to give you and idea of its power, apart from the header and footer, this entire page is powered by a single editor field… https://theworkofothers.com/spotlight/davide-pelino

Another way to do what you want is to store the snippets on Github and use the gist kirby tag.

12

Which is great for people who love Markdown, but many non-techies don’t, it seems. And I wouldn’t call the Editor a quirky WYSIWYG editor.

13

Me neither. It’s the opposite of most editors.

14

I’ve used a lot of them. It just feels (imho) wrong to try to create what is happening at the front in the back end. I’m sure the Kirby Editor is something else though.

I will have to find time …

15

You could also make a tag that loads a snippet. I use this in my projects to render a snippet inside a textarea.

<?php

return [
  'attr' => [
    'snippet'
  ],
  'html' => function($tag) {
  	$snipfile = $tag->attr('snippet');

  	return snippet($snipfile);
  }
];

use it like (snippet: nameofsnippet)

If you extend the above slightly to pass through a filename and class, you can store the code snippets in text files and have the snippet render them where you want.

1 Like
16

It’s different in that it creates structure content that you can access in many ways. Also, the markup for the frontend is totally under your control, you can adapt all snippets to your liking. It’s not fully WYSIWYG, either.

Have a look at it, especially for themes it might be a plus.

18

Cool, thank you

19

Will do

20

Still thinking that Kirby (2) would be great for the visually impaired. My daughter is blind and always wanted to see how she could work with just text files and markdown, something for another project …

21

Personally, I also love the simplicity of writing markdown and all the possibilities Kirbytext gives us for extending it with any kind of content we like. As I’ve written in other places, we create content for the getkirby.com website by editing text files (and auto-generating content), no Panel involved.