Website Building » Squarespace » How Do I Create a Code Block in Squarespace?

How Do I Create a Code Block in Squarespace?

Last updated on October 1, 2022 @ 4:45 am

There are two ways to create code blocks in Squarespace. The first is to use the Code Block tool in the editor. The second is to use the HTML <pre> tag.

To use the Code Block tool, add a new block and select “Code” from the list of options. This will insert a blank code block into your content area. You can then paste your code into the block and it will be formatted correctly.

PRO TIP: If you are not familiar with HTML or CSS, we recommend against trying to code a block in Squarespace. While Squarespace is relatively user-friendly, coding is a more complex task that can result in errors on your site if not done correctly. If you are set on coding a block, we recommend consulting with a professional web developer to avoid any potential issues.

To use the HTML <pre> tag, simply add the code into your content area where you want it to appear. Then surround the code with <pre> tags. For example:


Your code here..

Both of these methods will produce the same result – a code block that is correctly formatted and easy to read.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.