Code blocks

Add HTML, Markdown, CSS, and more to customize your site beyond its built-in features.

Last updated January 17, 2025

Use code blocks to add custom code to a page, blog post, sidebar, footer, or other content area. Code blocks are good options if you want to embed third-party widgets or customize pages beyond what's possible with other blocks. You can also use code blocks to render HTML and Markdown or display code snippets.

To learn more about choosing the best block for your custom content, visit Adding custom code to your site.

Accessing this feature

On all plans, code blocks support plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags.

Adding JavaScript or iframes to code blocks is available in the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan.

Watch a video

Add a code block

To add a code block:

  1. Edit a page or post, click Add Block or an insert point, then click Code. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. Add your code in the text field.
  4. If you're using the code block to display code snippets, switch the Display Source toggle on.

Add code

If you're using the code block to render code, ensure you select HTML or Markdown in the Type menu.

Enter or paste the code into the text field. To paste code, copy the code, then click into the field and press Ctrl + V (Windows) or Command + V (Mac).

Code blocks set to CSS or JavaScript display code as text by default. To render CSS or JavaScript in code blocks, select HTML from the drop-down menu. For CSS, surround the code with <style> </style> tags. For JavaScript, surround the code with <script> </script> tags.

Note

Code blocks have a 400 KB limit, which is around 300,000 characters.

Display source

If you're using the code block to display code snippets, switch the Display Source toggle on.

This is useful for showing examples of code, since code blocks automatically format code snippets for readability, making this a better option than a text block.

Note

Display Source is always checked for the CSS, JavaScript, and Plain Text options.

Preview embedded code

As a security measure, sometimes your code won't appear when you're logged in, even if visitors can see it. If you can't see code you added to a code block, click Preview in Safe Mode to view the embedded item.

Preview_in_Safe_Mode_button.png

Troubleshooting

If you're having issues with code blocks, keep in mind:

  • Your code might not render if you've added it to a page within an Index. To test, remove the page from the Index within the Pages panel and log out of your site.
  • Ajax loading can cause issues with custom code. To test, disable Ajax to see if you still experience the issue.

If code block issues prevent you from editing your site, disable scripts in preview to edit or remove the code.

If you're still having trouble, we recommend reaching out to the source (for example, the service where you received code for a widget), as they're most familiar with the way it’s supposed to work.

Note

Code-based customization falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting of custom code. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Code-based customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

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