Markdown

Cheatsheet

A quick reference and overview for Markdown syntax. These are some of the Markdown elements you'll use when building your blog posts in Alloy. The Alloy Editor has a nice toolbar though that will apply this Markdown formatting for you. This reference page is for those who wish to learn the formatting for manual use.

Headers

Headers can be created in several different ways within Markdown. Here we'll look at and use the most common form of header syntax:

Syntax 
# Header using an H1 tag
## Header using an H2 tag
### Header using an H3 tag
#### Header using an H4 tag
##### Header using an H5 tag
###### Header using an H6 tag
Output

Header using an H1 tag

Header using an H2 tag

Header using an H3 tag

Header using an H4 tag

Header using an H5 tag
Header using an H6 tag

Text Emphasis

You can apply emphasis to your text in the form of italicized or bolded text. You can also apply a strikethrough to your text as well. Here are a few examples:

Syntax 
The _quick brown fox_ jumped over the lazy dog's back.

The **quick brown fox** jumped over the lazy dog's back.

The ~~quick brown fox~~ jumped over the lazy dog's back.
Output

The quick brown fox jumped over the lazy dog's back.

The quick brown fox jumped over the lazy dog's back.

The quick brown fox jumped over the lazy dog's back.

Lists

Ordered and unordered lists are simple and easy to create in Markdown, and can be done with a few different syntaxes.

The first we will take a look at are ordered lists:

Syntax 
1. Superman
2. Wonder Woman
3. Aquaman
4. Green Lantern
5. Batman
6. Starfire
Output
  1. Superman
  2. Wonder Woman
  3. Aquaman
  4. Green Lantern
  5. Batman
  6. Starfire

Next, let's look at unordered lists. We can create these using a couple of different "bullet points" when typing out our Markdown:

Syntax 
* Superman
* Wonder Woman
* Aquaman

- Green Lantern
- Batman
- Starfire

+ Power Woman
+ Black Canary
+ Green Arrow
Output

  • Superman

  • Wonder Woman

  • Aquaman

  • Green Lantern

  • Batman

  • Starfire

  • Power Woman

  • Black Canary

  • Green Arrow

Lastly, we can create sub-lists by placing two spaces before a bullet point, like so:

Syntax 
* Superman
* Wonder Woman
* Batman Family
   * Batwoman
   * Batgirl
   * Nightwing
   * Robin
* Aquaman
* Green Lantern
Output
  • Superman
  • Wonder Woman
  • Batman Family
    • Batwoman
    • Batgirl
    • Nightwing
    • Robin
  • Aquaman
  • Green Lantern

Links

Links are essential when building out blog posts, and thankfully Markdown makes them super easy to create. Let's take a look at making some links.

The most common sort of link you'll use is an inline link, where the linked element and the URL reside together:

Syntax 
Inline links [allow you to see what is linked](https://elixirgraphics.com) and what the URL is.
Output

Inline links allow you to see what is linked and what the URL is.

Here are some examples of other inline links as well:

Syntax 
[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a relative reference to a repository file](../mywebsite/contact-us/)
Output

You can also use references for your links as well. This means you can separate your linked text and links, placing the actual links elsewhere. This is helpful when reusing the same URL multiple times within one blog post.

Syntax 
[I'm a reference-style link][A case-insensitive reference text]

[You can use numbers for reference-style link definitions][1]


[a case-insensitive reference text]: https://www.google.com
[1]: https://google.com
Output

Images

Another necessity when building a blog post is the placement of images within your entry. Much like links, images have a very simple syntax.

In creating our images we can add an ALT tag, seen in the square brackets below, as well as a TITLE tag within the quotation marks. Much like links we can use an inline style, as seen in the top example or a referenced style, as seen in the second example:

Syntax 
![alt text](https://elixirgraphics.com/img/alloy-icon-128.png "Alloy Logo")

![alt text][logo]

[logo]: https://elixirgraphics.com/img/alloy-icon-128.png "Alloy Logo"
Output

Code

Many times in writing blog posts we want to share snippets of code with our readers. This can be done with inline code snippets for small pieces of text, or in blocks, for larger bulkier pieces of code.

Here we'll be using some inline code formatting:

Syntax 
Inline `code` has single `back-ticks around` it.
Output

Inline code has single back-ticks around it.

This example is a block of code. We surround the code block with three backticks both above and below our code block, like so:

Syntax 
```
<head>
  <meta charset="utf-8">

  <title>My Website Name</title>
  <meta name="description" content="A short description of my website">
  <meta name="author" content="RapidWeaver">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

```
Output 
<head>
  <meta charset="utf-8">

  <title>My Website Name</title>
  <meta name="description" content="A short description of my website">
  <meta name="author" content="RapidWeaver">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

Blockquote

Quoting sources and people is something we do often in blog posts, and creating such blockquotes is very easy using Markdown:

Syntax 
> “That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.”
Output

“That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.”

Horizontal Rule

Dividing up content with a horizontal rule is super simple using Markdown. We just need to string together a few dashes and we're done. Since Alloy uses three dashes in a row for its YAML Front Matter support, we want to make sure that we use four or more dashes for our horizontal rules, like so:

Syntax 
We can divide this text here from...

----

...this text here, using a horizontal rule.
Output

We can divide this text here from...

...this text here, using a horizontal rule

Note: In addition to dashes we can uses underscores or asterisks as well.

Tables

While table creation isn't a part of core Markdown, it is included in Alloy's Markdown parser. Below you'll see how we can build a table with nothing but plain text:

Syntax 
| Header One | Header Two | Header Three |
|------------|------------|--------------|
| Row        | Cell       | Cell         |
| Row        | Cell       | Cell         |
| Row        | Cell       | Cell         |
Output
Header One Header Two Header Three
Row Cell Cell
Row Cell Cell
Row Cell Cell