How to Style Code Blocks in Squarespace like a Pro

Want your Squarespace code blocks to look sleek and modern? With a bit of custom CSS, you can give them a professional look that stands out.

Here’s how to do it:

1. Add a Code Block

First, add a regular Code Block to your Squarespace page.

2. Use This CSS

Go to Design > Custom CSS in Squarespace and paste this CSS to style your code blocks:

/* General styling for code blocks */ pre { font-family: 'Fira Code', monospace; /* Use a modern monospace font */ background-color: #2d2d2d; /* Sleek dark background */ color: #ffffff; /* Bright, readable text */ padding: 16px; /* Add some breathing room */ border-radius: 6px; /* Smooth rounded corners */ line-height: 1.6; /* Enhance readability */ overflow: auto; /* Handle long lines */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */ font-size: 14px; /* Adjust text size */ }

3. Save and Preview

Save your changes, and check out your freshly styled code block! It’ll have:

• A dark background for focus.

• Bright, clear text for readability.

• Smooth rounded corners and a modern font.

Why It Matters

Readable, well-styled code blocks not only improve your website's aesthetic but also make your content easier to digest—especially for developers or tech-savvy readers.

Try it out and let me know how it works for your site! 👇