Add images in Squarespace when writing in Markdown

One of my biggest gripes with Squarespace version 6 (and there are many) is that I couldn't figure out how to add images in between two paragraphs when writing in Markdown. Today I finally got annoyed enough that I stopped writing to figure out an solution.

An hour of trial and error got me nowhere, so I turned to Google. Thankfully, I found this article by Devir Kahan that explains an easy way to do it. It's a bit of a hack, but a clever one. It works and it's relatively painless. Awesome!

How to add an image with link in Markdown

Today I updated the disclaimers and license section of my photography website. In doing so, I wanted to add the Creative Commons License logo with the image linking to the relevant site.

I didn't know how to do this in Markdown. After a few minutes I figured it out, it turned out to be not just easy to do, but just plain logical. That's why I love writing in Markdown. Here's how it works:

The Markdown syntax to add an image is:

    ![Alt text](/path/to/img.jpg)

This puts the image in, but it doesn't link to anywhere. To add a regular text link in Markdown, the syntax is:

    [This link](http://example.net/)

The link text is delimited by square brackets and the destination URL is delimited by regular parentheses immediately after the text link's closing bracket.

There you have the syntax for adding an image and the syntax for adding a link. If what you want is a combination of both… an image that is a link, just combine them like this:

    [![Alt text](/path/to/img.jpg)](http://example.net/)

It works perfectly. The final syntax that I used on my site is:

    [![Creative Commons License](http://i.creativecommons.org
    /l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/
    licenses/by-nc-nd/3.0/)

Byword Review - My favourite text editor

I'll start my Byword review by stating that Byword is a beautiful app and has become one of my favourite apps overall. It's awesome.

Why Byword?

But why go for Byword when TextEdit comes bundled with every Mac and it's a very capable application?

Well, Markdown is why. Ever since I started writing in Markdown I’ve been looking for a simple text editor that supports it.

All I really wanted was an app that:

  1. Converted Markdown to HTML.
  2. Looked good.

I went to the Mac App Store and found several that met my two requirements. After reading up on the most interesting ones, I narrowed it down to two options: iA Writer and Byword. Both very similar.

Byword vs. iA Writer

iA Writer looks amazing, and I really like the font it uses: Nitti Light. I wrote a comment about iA Writer after an excellent review by Ben Brooks, and came very close to buying it. I actually use and love iA Writer for iPad, so it seemed like an obvious choice.

However, it turns out the font looks huge on a big screen and there’s no way of customising it. iA Writer has no preference pane. And although I think minimal options are a great idea, the fact that font size is set means it looks different on different screen sizes, which makes writing on a big monitor a aweful experience.

Byword prefrerences pane

Byword, on the other hand, has the perfect preferences pane. As you can see in the screenshot, Byword lets you customise:

  • Colour scheme: Dark text on light background or light text on dark background
  • Column size: Narrow, medium, wide. Perfect for different screen sizes
  • Font: Again, solves the screen size problem
  • Text Format: Plain text, rich text, or markdown

Byword has exactly what I want. No more, no less. Did I mention Byword is awesome?

Byword feels extremely simple in use, but has a good combination of features that get out of the way when you don’t need them. Like:

  • Full Screen, which removes everything but the text
  • Paragraph Focus, which fades everything except the paragraph you’re typing
  • Typewriter Mode: which centres the line of text you’re writing so it’s always in the middle of the screen (my favourite)
  • Word and character count
  • Export to different formats: It can convert Markdown to HTML, RTF, Word, PDF, Latex

I use Byword with the black text on white background as I find it easier on the eyes. It’s really a light grey background and dark grey text, which looks so much better than just black and white.

I use a “medium” column size on my MacBook as it’s easier to read. It makes the column size similar to a pocket book.

Even though Byword comes with a few good font/size combinations built in, I chose to use the open source Inconsolata XL. It’s a version of Inconsolata that adds a bold version. It’s a monospaced font that reminds me of writing on an old typewriter.

I also set the deafult text format to Markdown. Byword does a great job with it. It gives you a visual representation of what you’re writing. For example, bold and italics actually turn into bold and italic font. And Byword turns links into a very light grey that almost disappears into the background. It’s difficult to describe, but it’s a great way to write in Markdown.

Hopefully this Byword review is useful. I highly recommend it.

You can get Byword from the Mac App Store.

On Markdown and a simple plain text editor

Kevin Lipe on a guest post in Forkbombr:

Around the end of the Classic era, Microsoft came out with Office 98, which was an awful abortion, but it was also a direct result of a terrible moment in Macintosh history: the replacement of Word 5 by Word 6.

I remember that time. Word 6 came out and it was painful to look at with all those ugly 3D buttons. The simplicity of Word 5 was lost and suddenly you actually had to learn the software.

Later in the piece, Kevin Lipe explains why he liked Word 5 so much:

Pretty much the only thing you can use this program to do is type words. It doesn’t have a full screen mode, it doesn’t let you generate charts from an attached Excel spreadsheet, it doesn’t let you export a webpage, it doesn’t have thirty-seven different newsletter templates, it doesn’t make coffee, it doesn’t offer next-day shipping on purchases over $100, it doesn’t, well, it doesn’t get in your way.

The whole article is great. He goes on to explain why he misses Word 5 and how Markdown and a simple text editor are the way to go instead of either a bloated, cluttered word processor that's trying to do too much, or a dedicated writing workflow application.

I agree. I'm a Markdown fan and I write pretty much everything that will (or even might) end on the web in Markdown using either TextEdit or nvALT. I've also started writing non-web stuff in Markdown now and saving as plain text files, which gives me peace of mind that I'll be able to open them in the future as they're not any particular software's proprietary format.

The best way to explain Markdown is to use the words of John Gruber, the guy that invented it:

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

It's really cool. Thank you John.