Write More Effectively in Squarespace Using Markdown

If you are building a website with Squarespace, or any other website builder, you are going to need to add compelling text to your site. There’s no way around it. Adding text is crucial to the success of your site. Particularly if you are trying to bring visitors to your site from search engines.

Adding text to your Squarespace site can be done using one of the several Content Blocks, including the Markdown Block. Why would you want to use Markdown? Let’s briefly look at what Markdown is and then why you will want to use it.

What is Markdown?

Markdown is a text-to-HTML conversation tool developed by John Gruber, a writer and blogger at Daring Fireball. Gruber is widely popular in the Apple and web design communities. Markdown has been adopted by many writing applications and services such as Squarespace.

You may be familiar with WYSIWYG (What You See Is What You Get) formatting in word processors like Microsoft Word and Apple Pages. Also, almost all email apps or services use WYSIWYG for styling text. With WYSIWYG, you style text by selecting words and then clicking an icon to apply the style. The text then displays in the format you apply. For example, text is made bold by clicking the “bold” icon.

How can it help you write better?

Writing in Markdown is a bit different because you write in plain text using punctuation characters. These include underscores, asterisks, dashes, and hash marks to indicate the styling of your text. More importantly, the punctuations look like what they mean. Let’s look at how Markdown styling works.

Markdown allows you to efficiently create content with a focus on readability. It allows you to write in plain text without worrying about taking your hands off the keyboard to apply styling to your text.

For example, if you want to make your text bold, you add double asterisks before and after the text you want to be bold.

**bold**

Italicize text by adding single asterisks around your text.

*italics*

To create a bulleted list, start each list item with a dash followed by a space as seen in the following example list of fruits.

- apple
- oranges
- bananas

If you want to create headings within your content, you precede your headings with hash marks.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

These are just a few simple examples of how to style your text with Markdown. See Chapter 11 - Creating Content with Content Blocks of my book, Squarespace 6 For Dummies, about how to apply more styling options with Markdown.

Markdown is a great way to create content that gets converted to semantically written HTML. Markdown creates clean code that displays your content as intended and allows search engines to correctly index your content.

How does Squarespace make Markdown even better?

Writing in plain text can be a little confusing when you want to see your text with style applied. Without the visual cues of bold and italic text, colored hyperlinks, and headings that stand out, writing in Markdown can be frustrating to the Markdown newbie. There are three great reasons Squarespace makes the process of writing in Markdown user-friendly for both newbies and Markdown pros.

Visual Styling in Markdown

As you format your content in a Markdown Block, Squarespace will apply simple formatting to your text. For example, words that you bold with double-astericks will appear bold while you write, and italicized words will be styled as italic.

The following shows you how text is styled as you write in a Markdown Block.

# A First Level Header

## A Second Level Header

You’ve never heard of the Millennium Falcon? … It’s the ship that made the Kessel run in less than 12 parsecs. This is just a regular paragraph.

### List of Favorite Star Wars Characters

- Qui-Gon Jinn
- Obi-Wan Kenobi
- Han Solo
- R2-D2

Markdown Formatting Bar

If you are struggling with the basics of Markdown and would prefer to use text styling icons, you are in luck. Squarespace has a style formatting bar that appears above your text when you are writing in a Markdown Block.

<img src="http://static1.squarespace.com/static/50dda4a6e4b03955129888bf/50dda4a6e4b03955129888c7/524793eae4b05bfd3a981f65/1380422710396/squarespace-markdown-formatting-bar.png" alt=""/>

The Markdown formatting bar is not as robust as the Text Block formatting bar, but it does provide you with the following basic styling options.


  • bold

  • italic

  • hyperlink

  • heading 1

  • heading 2

  • blockquote

  • numbered list

  • bulleted list

I’ve found that adding hyperlinks is probably one of the most frustrating aspects of writing in Markdown. Adding them can break the flow of your writing because you need to add two sets of characters to wrap around your hyperlinked text and the URL. Not to mention that you have to find, copy, and paste the URL in your text.

Also, since Markdown is in plain text, you will be able to see the URL for the hyperlink in your writing. Short URL’s like http://www.apple.com aren’t that bad, but long URL’s can make your text look cluttered which could make reading your text a bit tough.

While Squarespace can’t find, copy, and paste URL’s for you, it does make adding and reading hyperlinks easier using the Hyperlink Icon in the formatting bar.See Chapter 11 - Creating Content with Content Blocks of my book, Squarespace 6 For Dummies, about how to about how to add a hyperlink to your content.

Squarespace eliminates the visual clutter of a URL in your text by putting a number reference after the hyperlinked word. For example, [this is how a hyperlink looks in Markdown ][1], and the actual URL is then placed at the end of the paragraph.

[1]: http://www.squarespace.com

Markdown Headings and CSS

Web designers and developers familiar with styling their site using CSS will be glad to know that Markdown headings, text preceded by one or more hash marks, will have a unique id selector when converted to HTML on the live site.

For example, if you have the following h3 heading in your Markdown Block:

### Why I Love Using Squarespace

The HTML code that renders on your site will be the following:

<h3 id="squarespaceisawesome">Squarespace is Awesome</h3>

This allows web designers to target specific headings in your site with CSS to apply unique styling.

So far, the headings in Markdown are the only HTML elements that seem to get this special treatment.

Conclusion

Using Markdown to compose your text, can actually make writing more enjoyable. It removes the distractions of typical writing formats such as WYSIWYG, and lets you get straight to the point of writing — distraction free for the most part.

If you have any tips or tricks you use when composing text in Markdown, please share them in the comments.

Source

Share

Kris Black

Kris Black is a user experience designer & developer building websites and mobile apps at truematter. Kris is also a partner at black&hue, specializing in building websites on Squarespace for small businesses, creative professionals, and entrepreneurs.

Learn more about Kris at his website.