When, Why, and How to Use the Markdown Block in Squarespace

What’s the Markdown block and when, why, and how should you use it?

To put it simply, Markdown is a text editor that offers more control. You can write HTML and CSS using Markdown and regular text and code can live together in one editor, but you can also use it to make bulleted lists, make certain words bold or italic, linking text, adding inline styles, creating blockquotes, and even adding simple tables.

Squarespace offers a lot of these functions in the style editor or regular text editor, but Markdown is great to use if you want to add styles to only certain text rather than change the style of the whole site.

For example, you assigned certain styles to your Header 1 in Squarespace’s style editor, but you want to make just one Header 1 look different than the rest. You can use Markdown to implement that design.

Most often, Sealevel Agency uses the Markdown block to add styles to a page or a certain section without changing the styles of the whole site.

We like using our travel photos on our site banners but want to be able to add text over them. We’ll use the Markdown block to add a subtle dropshadow to text when it’s over an image to be able to see it more clearly. Here’s how we would do that:

<div style=”text-align:center”>
<span style="text-shadow:-1px 1px 3px #000;">
This is example text.
</span>
</div>

That might look something like this:

<div style=”text-align:center”> Pushes the text to the center of the image.

”text-shadow:-1px 1px 3px”> The first two numbers defines the direction of the shadow and the third number defines the amount of blur. Subtlety is best with drop shadows as sometimes they can start to look a little clip-arty when they’re over down.

By contrast, bold colors and longer shadows can be a playful design aesthetic that’s definitely on-trend.

Something like this! This was made with the Markdown block!

There are so many cool ways to use the Markdown block, especially when you want to change the styles of only certain elements instead of changing the style of the whole site.

Squarespace offers some Markdown support and a breakdown of all the cool things you can do here.

The gradient button plugin in that we walked you through in this blog post can also be made in a Markdown block.