Copy-able code snippets in Webflow

Hi all!

I’d like to know if anyone’s figured out how to create a code cell you can copy & paste from in webflow.

The code would NOT be executable. Rather, we want a user to click a small icon which copies the code into their clipboard.

You can see an example of what we’re looking for in the the docs of this page:

(The box up top).

Have been searching for a while without luck. Any help would be appreciated.

Hey @Justin_Tenuto - try this:

Embed this where you want your code block to appear:

<div class="CodeSnippet">
  <button class="CopyButton"><i class="far fa-copy"></i> Copy Code</button>
  <div class="codeCopied">
    Copied to clipboard!
  </div>
  <pre class="snippet"><code class="json" >
    const userAction = async () => {
  const response = await fetch('http://example.com/movies.json', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}
 </code>
</pre>
</div>

Embed this in the sitewide/page level head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <link rel="stylesheet"    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/night-owl.min.css" integrity="sha512-xYwrX34LRktCfb+3WW0FtJf6qEc2tcJet152No8epFPBoM4qNaaVk5xdfCYI0Ns0H2jD0Isc3VoShSMv6zzpPA==" crossorigin="anonymous" />
    <script>hljs.highlightAll();</script>
    <style>
            * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .CodeSnippet {
        max-width: 800px;
        width: 100%;
        margin: 0px auto;
        min-width: 300px;
        position: relative;
      }
      .snippet {
        font-size: 16px;
      }
      .CopyButton {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: #3e66fc;
        border: none;
        outline: none;
        color: white;
        padding: 9px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-family: monospace;
        font-weight: 500;
        transition: all .2s ease;
      }
      .CopyButton:hover {
        background-color: #3B5CF1;
      }
      .codeCopied {
        background-color: #2D53F5;
        padding: 9px 15px;
        color: white;
        position: absolute;
        right: 15px;
        bottom: -10px;
        font-family: monospace;
        display: inline-block;
        border-radius: 5px;
        transition: all .3s ease;
        opacity: 0;
      }
      .codeCopied-active {
        bottom: 55px;
        opacity: 1;
      }
      .fa-copy {
        pointer-events: none;
      }
        /* width */
        .CodeSnippet ::-webkit-scrollbar {
    width: 8px;
  }
  /* Track */
  .CodeSnippet ::-webkit-scrollbar-track {
    background: #071725;
  }
  .CodeSnippet /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #2D53F5;
  }
  /* Handle on hover */
  .CodeSnippet ::-webkit-scrollbar-thumb:hover {
    background: #3B5CF1;
  }
    </style>

Finally, embed this in the sitewide/page level body tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script>
            new ClipboardJS('.CopyButton', {
          target: function(trigger) {
              return trigger.nextElementSibling.nextElementSibling.firstChild;
          }
      });
      window.addEventListener('click', (e)=>{
          if(e.target.classList.contains("CopyButton")){
              e.target.nextElementSibling.classList.add("codeCopied-active");
              if (window.getSelection) {window.getSelection().removeAllRanges();}
              else if (document.selection) {document.selection.empty();}
              setTimeout(()=>{
                  e.target.nextElementSibling.classList.remove("codeCopied-active");
              },4000)
          }
      });
    </script>

Let me know if this gives you any issues!