ZippyStarter logo

Markdown

Markdown cheatsheet for use with React and MDX.

What is Markdown?

Markdown is a tool for formatting text on websites. It lets you control how your text looks, like making words bold or italic, adding images, or creating lists. It's mostly just regular text with some special characters like # or * added in.

Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

Headers

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

Emphasis

_This text will be italic_

**This text will be bold**

_You **can** combine them_

This text will be italic

This text will be bold

You can combine them

Lists

Unordered

- Item 1
- Item 2
  - Item 2a
  - Item 2b
  • Item 1
  • Item 2
  • Item 2a
  • Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 3a
  5. Item 3b

Images

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Format: ![Alt Text](url)

GitHub Logo

http://github.com - automatic!
[GitHub](http://github.com)

http://github.com - automatic! GitHub

Blockquotes

As Kanye West said:

> We're living the future so
> the present is our past.

As Kanye West said:

We're living the future so the present is our past.

Inline code

Consider using a
`<addr>` tag here.

Consider using a <addr> tag here.

Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

alertExample.js
function alertExample(arg) {
  if (arg) {
    $.facebox({ div: '#bar' })
  }
}

And here's how it looks - nicely colored with styled code titles!

alertExample.js
function alertExample(arg) {
  if (arg) {
    $.facebox({ div: '#bar' })
  }
}

Footnotes

Here's an example of a footnote[^1]. Additional text follows.

[^1]: Source reference.

Here's an example of a footnote1. Additional text follows.

Task Lists

- [x] requires list syntax (supports all list types)
- [x] this item is completed
- [ ] this item is pending
  • requires list syntax (supports all list types)
  • this item is completed
  • this item is pending

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| Primary Header              | Secondary Header             |
| --------------------------- | ---------------------------- |
| Cell 1 Content              | Cell 2 Content               |
| First Column Content        | Second Column Content        |
Primary HeaderSecondary Header
Cell 1 ContentCell 2 Content
First Column ContentSecond Column Content

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

Footnotes

  1. Source reference.