How to make tabbed code screen on Grav Learn2

Question

I could not find a solution for that tabbed code screen. Can anyone help me to figure it out ?

screenshot : https://i.stack.imgur.com/GUG4r.jpg

also this is the page which in screenshot: https://dev.iyzipay.com/tr/api/taksit-sorgulama

Thanks.

Answer 1

The tabs have been generated using the Grav Shortcode UI Plugin.

Here is an example from https://learn.getgrav.org/16/content/media#url:

markdown

[ui-tabs]
  [ui-tab title="Twig"]
    {% verbatim %}
      {{ page.media['sample-image.jpg'].url|e }}
    {% endverbatim %}
  [/ui-tab]

  [ui-tab title="HTML Code"]
    {{ page.media['sample-image.jpg'].url|e }}
  [/ui-tab]
[/ui-tabs]

result

The markdown source of above sample can be found at the repo of the docs: https://github.com/getgrav/grav-learn/blob/develop/pages/02.content/07.media/docs.md