Code Block

The Code Block component is built using Webflow's code block element, enhanced with custom styles that align with the Thind Styleguide's light and dark modes. It features a convenient "Copy Code" button on top, allowing users to easily copy the code snippet with a single click.

Installation

1. Copy the Component

   // Function to toggle between light and dark modes
   function toggleTheme() {
     const currentTheme = document.body.getAttribute('data-theme');
     const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
     document.body.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
   }
   
   // Apply the saved theme on page load
   (function applySavedTheme() {
     const savedTheme = localStorage.getItem('theme') || 'light';
     document.body.setAttribute('data-theme', savedTheme);
   })();
   

   

2. Code Block CSS

   Here’s the CSS that adapts Webflow code block to switch between dark and light modes. Add this to the global embed.

   ‍

   <style>
   code {
       background: var(--color--neutral--950) !Important;
   }
   .code_wrap {
       background: var(--color--neutral--950) !Important;
   }
   
   pre.w-code-block code {
       all: unset !Important;
   }
   
   /*Code element inside text*/
   p code {
     background-color: transparent !important;
     color: inherit; 
   }
   </style>

3. Code Block Javascript

   Add the following JS before </body> tag on all pages that will have the code block. You will also need Toast Component for copy button success notification

   <script>
   document.addEventListener('DOMContentLoaded', (event) => {
       const buttons = document.querySelectorAll('[data-action-name="copy-code-block"]');
       
       buttons.forEach(button => {
           button.addEventListener('click', () => {
               // Find the closest ancestor element containing both the button and the code block
               const container = button.closest('.code'); 
   
               if (container) {
                   const codeElement = container.querySelector('.code_wrap.w-code-block'); 
   
                   if (codeElement) {
                       const codeText = codeElement.innerText; // Use innerText to get the text content
                       
                       // Create a temporary textarea to copy the text
                       const tempTextArea = document.createElement('textarea');
                       tempTextArea.value = codeText;
                       document.body.appendChild(tempTextArea);
   
                       // Select and copy the text
                       tempTextArea.select();
                       document.execCommand('copy');
   
                       // Remove the temporary textarea
                       document.body.removeChild(tempTextArea);
   
                       // Show a toast using Thind Ui Toast
                       showToast("Code copied to clipboard!");
                   } else {
                    		showToast("Code element not found!", "error");
                       console.error('Code element not found');
                   }
               } else {
              			showToast("Container element not found", "error");
                   console.error('Container element not found');
               }
           });
       });
   });
   </script>