clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

All you need to know about markdown

Filed under: HTML/CSS— Tagged with: markdown

Short Markdown cheat sheet, and how to write markdown with WordPress, plus some external resources.

20.05.2014 added line break syntax 18.02.2015 added more Markdown Extra commands

This is a short post, cause there isn't that much to it, which is why Markdown so awesome.

First I was like, I'm not gonna learn a new language just to write another language, but it's not a language, your mom can write it, your 102 years old deaf and blind grandgrandpa can write it.

In a nutshell, markdown is an easy way to write HTML. It's not for writing entire websites, but content for websites, like this post.

Different flavors of markdown

There’s the normal syntax, and then there is the GitHub flavored syntax (GFM). GFM is more advanced. Then there are small differences depending on the parser. Here's some of the popular parsers:

  • Markdown extra (written in PHP)
  • CramDown (Ruby)
  • redcarpet (Ruby)

This post looks mostly the standard syntax and some of Markdown Extra.

Syntax

Line breaks

Have a blank line that'll start a new paragraph. If you want a just a simple line break <br> leace two on more spaces in the end of a line.

Autolink

<http://clubmate.fi>

Normal link

[http://clubmate.fi](clubmate.fi)

Or:

[My Blog][1] [Another Link][2] [1]: http://clubmate.fi [2]: http://example.com

Lists

- Unordered list, list item 1
- Unordered list, list item 2
- Unordered list, list item 3

1. Ordered list, list item 1
2. Ordered list, list item 2
3. Ordered list, list item 3
4. Ordered list, list item 4
5. Ordered list, list item 5

Code (those are back-ticks, not single quotes):

`codehere`

Traditionally you'd make code blocks with by inserting 4 space characters in from of the line

└─┬─┘
  └── Believe it or not, there are 4 space there

In Markdown Extra (a flavour of Markdown) fenced code blocks are possible with the back ticks:

```
<span class"something">Hello!</span>
```

Bold

**Bold text**

Emphasised

_Emphasised text_

Headers

# H1

## h2

### h3

Images:

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

Definition lists, this is specific to Markdown Extra:

Apple
  : Pomaceous fruit of plants of the genus Malus in
    the family Rosaceae.
  : An American computer company.
Orange
  : The fruit of an evergreen tree of the genus Citrus.

That’s the very basics of Markdown.

For WordPress

External resources

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!