Jump to content

Colorizing Code Snippets with Prism

Go to solution Solved by JayVanDyke,

Recommended Posts

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:
image.png.1396872c501b1760c0f70514dafe3cb4.png

How it appears running inside of Squarespace:
image.thumb.png.a011e56fc3092f2a96c9cbe5686c8be5.png

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

32 minutes ago, jaeveedee said:

Is it only broken in the back end of SS? Sometimes javascript stuff like this will be a little buggy in the editor since it's all inside an iframe underneath the editor. I'm looking to do this too so I'm definitely following!

@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.

Edited by DillonMcCardell
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.