<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<style>.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#2f2f2f}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}</style>
<style>.hljs{font-family:Monaco,Menlo,Consolas,"Droid Sans Mono","Inconsolata","Courier New",monospace;border-radius:5px;padding:1em;font-size:14px}.hljs *::selection{background:rgba(255,255,255,0.1);}.hljs-tag{color:unset!important}</style>
<style>.hljs{max-height:400px}</style>

<style>
  .button-copy {
    cursor: pointer;
    user-select: none;
  }
  .button-copy.copied .tn-atom {
    background-color: green !important;
    cursor: default;
    pointer-events: none;
  }
</style>

<script>
function fallbackCopyToClipboard(text) {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.position = 'fixed';

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  document.execCommand('copy');
  document.body.removeChild(textArea);
}

async function copyToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyToClipboard(text);
    return;
  }

  try {
    await navigator.clipboard.writeText(text);
  } catch(e) {
    fallbackCopyToClipboard(text);
  }
}


$(() => {
  const $codeText = $(".uc-code .t-col .t-text");
  const codeText = $codeText.text();

  const $pre = $('<pre></pre>').append(
    $('<code class="language-html"></code>')
      .text( $codeText[0].innerText)
  );

  $codeText.replaceWith($pre)

  hljs.highlightAll();


  $(".t396__artboard").each((_, artboard) => {
    $(artboard).on("artBoardRendered", () => {
      const $copyButton = $(".button-copy");

      if(!$copyButton.length)
        return;

      const $copyButtonText = $(".tn-atom", $copyButton);
      const originalText = $copyButtonText.text();

      $copyButton.click(() => {
        copyToClipboard( codeText );

        $copyButtonText.text("Скопировано");
        $copyButton.addClass("copied");
        setTimeout( () => {
          $copyButtonText.text(originalText);
          $copyButton.removeClass("copied");
        }, 3000 );
      })
    })
  })
})

</script>