How to add a background to a code block only in Squarespace 7.1

If you would like to display your source code, but make it stand out on the page, you can add a background that targets the Code Block only.

This elevates it from being regular plain text, to something that is eye catching.

---

Add the following to your Custom CSS

Copy Code

.sqs-block-code {
  background: #191919;
  padding: 3%;
}

Customise:

Adjust the colour by changing #191919 to a hex colour of your choice.

Find a hex colour, use the following -> https://www.color-hex.com/color/000000

Adjust the amount of padding around the block by changing the percentage number.