Colorizing Code Snippets with Prism

DillonMcCardell · November 2

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:

jaeveedee · November 2

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!

DillonMcCardell · November 2

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 November 2 by DillonMcCardell

jaeveedee · November 2

I think I see it! It may be blocked by being http and not https. Try changing it to that?

DillonMcCardell · November 2

@jaeveedee Yes, you are wonderful, thank you!

Colorizing Code Snippets with Prism

Recommended Posts

DillonMcCardell

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

DillonMcCardell

Posted Images

jaeveedee

Link to comment

DillonMcCardell

Link to comment

jaeveedee

Link to comment

DillonMcCardell

Link to comment

Create an account or sign in to comment

News

DillonMcCardell

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources