How to customize a markdown block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Markdown blocks are a creative way to add content to your site, and this tutorial will help you customize it so the content inside can have its own unique style! One of my favorite things about a markdown block is that it can have its own unique styles thanks to CSS. This tutorial shows you a few ideas that you can use to inspire your own custom code creations!

You can tell a browser to change the heading one font if it’s in a markdown block, or create a unique background and border so it really pops on the page compared to everything else.

The main concept here is to start your code with the selector .markdown-block

After that, use any selector you want to change only that type of content inside a markdown.

Here is a link to the markdown cheat sheet from Squarespace.

---

Here is the code from this tutorial:

This is just a design suggestion! Be sure to change the colors and other values to make it unique for your own site.

.markdown-block h1{

Font-size:2rem

}

.markdown-block{

background:#e5f5f6;

border-left:5px solid #50bdb8;

Padding:1rem!important

}

.markdown-block blockquote{

background:#FFF; padding: .5rem

}