How to Style Code Snippets on Squarespace with Prism

Utilize PrismJS through a CDN to provide stylish code snippets on Squarespace.

PrismJS: https://prismjs.com

Step 1: Create Embed Block

Embed Block

Add an embed URL or code. Learn more

Step 2: Edit embed html

Step 3: Paste your snippet

Replace YOUR CODE HERE with your code snippet, then paste this whole text block within the embed code.

Change “language-bash” to the respective language to match your code. Find a full list of supported languages here: https://prismjs.com/#supported-languages

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>

<pre><code class="language-bash">YOUR CODE HERE</code></pre>

Then save and publish your page. That’s it! Your code snippet should now look nice like the code snippets on this page.

Note that you won’t be able to see the nice formatting until the page is published.