Jump to content

DillonMcCardell

Member
  • Posts

    3
  • Joined

  • Last visited

Everything posted by DillonMcCardell

  1. @jaeveedee Yes, you are wonderful, thank you!
  2. @jaeveedee At one point the syntax highlighting from Prism did appear visible after saving my work in the SS editor, but no longer. This seems to indicate that yes, the javascript in stuff like this can be a little buggy. Currently it does not appear highlighted on my website. You can double check for yourself here, on a similar post using the same Prism highlighting syntax: https://www.dillonmccardell.com/blog/git-status-check-script The fact that I have verified this works outside of SS leaves me at a loss. I am hoping someone here can give me some SS specific help to resolve this.
  3. I am attempting to add code snippets to my website that are colorized using PrismJS. I have a script running in VSCode that works just fine and colorizes the code snippets properly. Whenever I put this code into Squarespace however, the code is no longer colorized. The weird part is that it was colorized for a short time, but doesn't seem to be working anymore. I am new to Javascript and HTML in general, and so I am hoping someone here can explain to me why this script works outside of Squarespace, but not in it: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css" /> <style> .code { background-color: #272822; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); margin: 10px; position: relative; } .copy-button { position: absolute; top: 10px; right: 10px; background-color: rgba(169, 169, 169, 0.5); border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; } .copy-button:hover { opacity: 1; } </style> </head> <body> <div class="code"> <button class="copy-button" onclick="copyCode()">Copy</button> <pre> <code class='language-lua'> -- Define a function to handle button presses function button_pressed(event, button) if event == "pressed" then print("Button " .. button .. " was pressed!") end end </code> </pre> <script src="https://prismjs.com/components/prism-core.min.js"></script> <script src="https://prismjs.com/plugins/autoloader/prism-autoloader.min.js"></script> </div> <script> function copyCode() { const codeElement = document.querySelector('.code code'); const codeText = codeElement.textContent; // Create a temporary textarea to copy the code text to the clipboard const tempTextarea = document.createElement('textarea'); tempTextarea.value = codeText; document.body.appendChild(tempTextarea); tempTextarea.select(); document.execCommand('copy'); document.body.removeChild(tempTextarea); // Change the button text to 'Copied ✓' const copyButton = document.querySelector('.copy-button'); copyButton.textContent = 'Copied ✓'; } </script> </body> </html> How it appears when running outside of Squarespace: How it appears running inside of Squarespace:
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.