web/wp-content/themes/mozilla-builders/blocks/advanced-code/advanced-code.twig

{% if code is not empty %}
<div x-clipboard data-block="advanced-code" class="relative flex flex-col {{ alignclass }}">
  <div class="flex justify-between items-center gap-4 {{ filename ? 'w-full py-3 border-t border-content [.alignfull_&]:md:px-3' : 'absolute top-2 right-2' }}">
    <div>
      {% if filename is not empty %}
      <p class="text-sm font-sans font-bold">{{ filename }}</p>
      {% endif %}
    </div>

    <button
      x-clipboard:trigger
      :data-state="copied ? 'active' : 'inactive'"
      aria-live="polite"
      class="p-1 bg-action text-action-reverse data-active:bg-action-focus data-active:text-action-focus-reverse"
    >
      <span class="sr-only" x-text="copied ? 'Copied' : 'Copy'">Copy</span>
      <svg class="w-5 h-5" aria-hidden="true">
        <use href="#copy" :hidden="copied" />
        <use href="#check" :hidden="!copied" hidden />
      </svg>
    </button>
  </div>

  <pre class="flex flex-col selection:bg-white selection:text-black">
    <code x-clipboard:content class="type-code overflow-x-auto hljs {{ language }}">{{ code.highlighted }}</code>
  </pre>
</div>
{% endif %}