Squarespace Markdown Block: Everything You Need to Know
Squarespace uses rich text editing by default. However, if you’re looking for a higher degree of control over your content, markdown text might be the perfect alternative!
In this article we’ll look at the Squarespace markdown block and what you can create using the markdown language.
What is markdown?
Markdown is a special type of code you can use to format plain text. It’s a little like programming codes like HTML and CSS, but is specifically used to make text more readable.
Of course, you can add formatting elements like bullet points, headings, and links using rich text editors, often known as WYSIWYG editors. However, the benefit of markdown is in its precision. With markdown, you have more control over the formatting elements you add to your page.
This means you get cleaner content that will always look right, no matter which platform or system you view it on.
How to add a Squarespace markdown block
You can add a markdown block to any part of your page. Just click on an insert point and choose Markdown from the Block menu.
This will open a new window you can add your markdown text to and add formatting, either using markdown language or the formatting buttons at the top of the window. You’ll be able to see the changes on your page as they’re made.
Changes are saved automatically on 7.1; otherwise click Apply to save your work.
Is a Squarespace markdown block the same as a text block or code block?
Yes and no. A text block in Squarespace doesn’t understand markdown language. If you used markdown, a text block would treat it differently to a markdown block.
You can add markdown text to a code block. However, the code block doesn’t have formatting buttons in the same way the Squarespace markdown block does. So while you can use the code block to insert your markdown code, you’ll need to do it all from scratch!
Markdown language – the basics
Markdown language works by wrapping your text with specific symbols and characters – this is known as syntax.
For example, if you want to make your text italic, you add *one* asterisk around the text. If you want to make it bold, you add **two**.
If you want to add a H1 tag, precede the text with a # Hash.
If you want to add a H2 tag, precede the text with two ## Hashes, and so on. If you want to add H5, or H6 tags to your content, you’ll need to use code, as the rich text editor only lets you add H1, H2, H3, and H4 tags.
When you want to add a horizontal line to your text, use three dashes ---.
Thanks to sqlbak for the markdown cheat sheet. There’s also a markdown cheat sheet on the Squarespace website that contains all the syntax you can use to format your text.
What you can build with a Squarespace markdown block
A Squarespace markdown block is ideal if you need to create something where accuracy is essential.
For example, let’s take a pricing table. As a pricing table has so many different elements, it’s crucial that the text in the table performs in a specific way. Otherwise, your pricing table may look wrong when people visit your website.
My pricing table tutorial uses markdown, meaning you can precisely control each line of text and how it is formatted.
How to use markdown editing by default
If you prefer to work using markdown, you can set your site up to use it by default, rather than using a Squarespace markdown block each time.
Just go to Settings, click Advanced, and choose Default Text Editor. You can then toggle between Rich Text Editor and Markdown Editor.
Click Save, and you’re ready to go!
Bonus: Add extra functionality to your Squarespace markdown blocks
I hope this short guide has explained the basics of markdown and how you can use it on your site. It’s not for everyone, but it’s the perfect way to ensure your text is precise, clean, and can be viewed across different platforms.
Whether you’re using code blocks, markdown blocks, or text blocks, Spark Plugin can help you customize your Squarespace site even more! Just install and take advantage of over one-hundred fantastic customizations. Here are three of my favorites.
1. Block animations
If you want to make your page livelier and more exciting, the block animations customization transforms any block on your website. Choose from several animations, including a subtle hover and a full-on spin!
2. Show on hover
This customization lets you show additional elements when a visitor hovers over a block, making your site more interactive and fun!
3. Hide a block on mobile
Only want your block to show to people viewing your site on desktop? This innovative customization lets you hide any blocks on mobile, meaning a tidier, more streamlined, and faster page!
