My Profile Photo

Trevor Jones


My musings - interesting to me, hopefully will be for you


How To Write in Markdown for Jekyll

If you’ve never written in Markdown, I think you’re going to like it.

It helps you focus on your writing and if you’re a real programmer, you can do it in a native environment, like Sublime. Markdown isn’t complicated, so don’t over think it. It’s just a way to write that can be interpreted by Jekyll and then by a browser.

To write in Markdown, just save the file as .md. There are certain conventions for writing in Markdown that allow you to add a bit of styling - like headers, lists, even a block of code, like this:

See? I'm writing in a block to make it look more like code.

And to do that, all I do is indent that line. Nothing special! That’s what makes Markdown so easy. I think the best way to learn Markdown is by downloading Mou. Your writing panel is split in two, one for you to write in Markdown and one where you see how it appears.

So download that app and play around with Markdown - you won’t regret it. The other cool thing about Mou is it comes with a file that shows you all the syntax for Markdown, so it’s your own little cheat sheet!

But I still want to review (quickly) some basic things you’ll be using for many of your posts.

####Headers Headers are made with the pound(hash) sign. I assume you’re familiar with HTML, which uses h1, h2, h3 tags. In Markdown, # is equivalent to h1, ## to h2, ### to h3 and so forth. So it looks like:

#h1
##h2
###h3
####h4

And is properly formatted as:

#h1

##h2

###h3

####h4

####Lists You can have both ordered and unordered lists. For ordered lists, just put “1. “ (that’s a space after the period). For unordered, it’s simply an “* item”. They need to be their own lines and have a space between it and the sentence before it.

Ordered:
1. item 1
2. item 2
3. item 3

Looks like:

  1. item 1
  2. item 2
  3. item 3

and

* item 1
* item 2
* item 3

looks like

  • item 1
  • item 2
  • item 3

####Links Links are fun. Mou will show you several ways to make links, but all you need to do is put the word you want to link inside of brackets and the link directly after it inside paranthesis. Like so

[My Link](www.example.com)

####Images I admit I struggled at first to get an image in my blog post - because I didn’t notice something very important to the syntax . . . an “!”. To link an image

![Name of image](image source)

The image source can either be the file location or a link. Very similar to HTML. Just remember to put that “!” at the beginning!! I did not see that when I was first figuring this out.

So there you have it! I recommend using this to write your posts. I believe you can use HTML but it’s a bit harder to format and isn’t really meant for writing lots of text. Markdown is by far superior and super easy to learn. Now you know how to write a blog post, so let’s get one up!

comments powered by Disqus