developer.konghq.com/app/_includes/syntax_highlighting.html at 9e45a99514e722a7bdacfd77bdfa6553afa080d9 · Kong/developer.konghq.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
{% capture copy %}
<div class="absolute right-8 flex text-xs text-white bg-brand p-1 rounded invisible opacity-0">Copied!</div>
<clipboard-copy for="{{codeblock.id}}" aria-label="Copy" data-copy-feedback="Copied!" class="copy-action group">
    <svg width="14" height="14" viewBox="0 0 24 24" class="flex group-[.success]:hidden" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5ZM9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16Z" fill="currentColor"/>
    </svg>
    <svg width="14" height="14" viewBox="0 0 24 24" class="hidden group-[.success]:flex" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(var(--color-semantic-green-primary))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M20 6 9 17l-5-5"></path>
    </svg>
</clipboard-copy>
{% endcapture %}

<div class="custom-code-block w-full h-fit inline-grid rounded-lg {{codeblock.css_classes}}"
  {% for data in codeblock.data %}{{ data[0] }}="{{ data[1] }}" {% endfor %}
>
    {% if codeblock.render_header %}
    {% if codeblock.data['data-file'] %}
    <div class="custom-code-block__header grid grid-cols-[1fr_auto]  justify-items-end items-center px-3 py-1 bg-code-block-header rounded-t-lg border border-primary/5">
        <div class="text-sm text-white dark:text-primary justify-self-start">{{codeblock.data['data-file']}}</div>
    </div>
    {% endif %}
    {% if codeblock.ask_kai %}
        <div class="custom-code-block__header grid grid-cols-[1fr_auto]  justify-items-end items-center px-1 py-1 bg-code-block rounded-t-lg border border-primary/5 border-b-0">
            <a href="{{codeblock.ask_kai}}" class="flex text-white dark:text-primary bg-code-block-header dark:bg-code-block border border-transparent dark:border-brand rounded text-xs p-1 items-center no-icon hover:no-underline" target="_blank">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 12.0884V12.4355C15.7128 12.4355 14.5598 16.2296 14.5598 19.3252H14.2229C14.2229 16.2296 12.8732 12.4355 8.78272 12.4355V12.0884C13.497 12.0884 14.2229 8.29432 14.2229 5.19878H14.5598C14.5598 8.29432 15.2977 12.0884 20 12.0884ZM7.28629 11.0361C7.28629 9.27503 7.94267 7.11656 10.3813 7.11656V6.91952C7.70577 6.91952 7.28629 4.76104 7.28629 3H7.09502C7.09502 4.76104 6.68206 6.91952 4 6.91952V7.11656C6.32779 7.11656 7.09502 9.27503 7.09502 11.0361H7.28629ZM9.21089 14.1529H9.04788C9.04788 15.6531 8.69578 17.4925 6.41038 17.4925V17.6604C8.39367 17.6604 9.04788 19.4998 9.04788 21H9.21089C9.21089 19.4998 9.76948 17.6604 11.8484 17.6604V17.4925C9.56843 17.4925 9.21089 15.6531 9.21089 14.1529Z" fill="currentColor"></path>
                </svg>
                <span>Run in KAi</span>
            </a>
        </div>
    {% endif %}
    {% endif %}
    {% assign show_inline_actions = false %}
    {% if codeblock.render_header == false and codeblock.copy %}{% assign show_inline_actions = true %}{% endif %}
    {% if codeblock.render_header == false and codeblock.collapsible %}{% assign show_inline_actions = true %}{% endif %}
    <div class="flex w-full relative bg-code-block rounded-b-lg border border-primary/5 overflow-auto p-3 {% if codeblock.render_header %}border-t-0{% else %}rounded-t-lg{% endif %} {% if show_inline_actions %}pr-11{% endif%}" data-code-snippet>
        <div class="code-block h-full w-full">{{codeblock.snippet}}</div>
        {% if show_inline_actions %}
        <div class="flex absolute right-3 top-[10px] items-center gap-2">
            {% if codeblock.collapsible %}
            <button class="collapsible-toggle p-1 rounded border border-transparent hover:border-primary text-secondary hover:text-primary transition-colors" aria-expanded="false" aria-label="Toggle code snippet" type="button">
                <span class="flex chevron-icon" aria-hidden="true">
                    <svg class="w-3 h-3 transition-transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg>
                </span>
            </button>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% if codeblock.collapsible %}
    <button class="collapsible-toggle collapsible-toggle--footer w-full py-2 px-3 text-xs text-secondary bg-code-block border border-primary/5 rounded-b-lg flex justify-center cursor-pointer transition-colors" aria-expanded="false" type="button">
        <span>Toggle code</span>
    </button>
{% endif %}
</div>