DillonMcCardell
-
Posts
3 -
Joined
-
Last visited
DillonMcCardell's Achievements
Level 2 (2/20)
1
Reputation
-
JayVanDyke reacted to a post in a topic:
Colorizing Code Snippets with Prism
-
Colorizing Code Snippets with Prism
DillonMcCardell replied to DillonMcCardell's topic in Customize with code
@jaeveedee Yes, you are wonderful, thank you!- 4 replies
-
- 1
-
-
- color
- code-injection
- (and 1 more)
-
Colorizing Code Snippets with Prism
DillonMcCardell replied to DillonMcCardell's topic in Customize with code
@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. -
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:
