Markdown

• Text decoration
• Headers
• Lists
• Links
• Images
• Code blocks
• Tables
• Blockquotes and citations

MDX Frontmatter

You can declare frontmatter in your .mdx files to provide specific metadata for the theme to use. The most important of which is the title. You can also provide a descriptions and keywords which will be added to the head of your document.

---
title: Markdown
description: 'Carbon Gatsby theme markdown documentation'
keywords: 'ibm,carbon,gatsby,mdx,markdown'
---

Text decoration

Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. Scratch this.

Code

Emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~

Headers

Note: It’s generally considered best practice to include just one h1 heading per page. This heading signals the title or primary subject matter of the content to your audience. Because the title component generated at the top of each page already uses an h1 heading, we recommend using h2 tags for section headings within your content.

H2

H3

H4

H5

Code

## H2
### H3
#### H4
##### H5

Lists

Unordered lists

• Unordered list can use asterisks
• Or hyphens to create list items
• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
• dolore magna aliqua. Pharetra massa massa ultricies mi quis. Adipiscing enim eu turpis egestas pretium aenean.
• Massa eget egestas purus viverra accumsan in nisl nisi.
• Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.

Ordered lists

1. First ordered list item
2. Item with a nested item
   1. Nested list item
3. In markdown, the actual numbers don’t matter, just that it’s a number
4. In markdown, the actual numbers don’t matter, just that it’s a number

Nested lists

• Unordered list can use asterisks
  • Nested list item
• Or hyphens to create list items

Code

- Unordered list can use asterisks
* Or hyphens to create list items
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Pharetra massa massa ultricies mi quis. Adipiscing enim eu turpis egestas pretium aenean.
- Massa eget egestas purus viverra accumsan in nisl nisi.
- Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.

1. First ordered list item
2. Item with a nested item
   1. Nested list item
3. In markdown, the actual numbers don't matter, just that it's a number
4. In markdown, the actual numbers don't matter, just that it's a number

1. First ordered list item
1. Item with a nested item
   1. Nested list item
1. In markdown, the actual numbers don't matter, just that it's a number

Links

I’m a local link

I’m a markdown link

I’m a markdown link with title

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Code

[I'm a markdown link](https://www.carbondesignsystem.com)
[I'm a markdown link with title](https://www.carbondesignsystem.com "Google's Homepage")
[I'm a local link](/components/demo)
URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on Github, for example).
Some text to show that the reference links can follow later.

Images

Code

![Alt text goes here](images/quantum.png)

Code blocks

You can read in depth about syntax highlighting and advanced code snippet features on the Code blocks page.

Inline code has back-ticks around it.

Blocks of code have three back-ticks above and below.
You can specify a language by placing it after the backticks.
You can also supply a source code URL or title to go at the top of the code block

Code

Inline `code` has `back-ticks around` it.
```markdown Title
Blocks have three back-ticks above and below.
Pretend the backslashes aren't there.
```

You can view a list of included languages at the react-prism-renderer repo.

Tables

Colons can be used to align columns.

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Code

Colons can be used to align columns.
| Tables        |      Are      |   Cool |
| ------------- | :-----------: | -----: |
| col 3 is      | right-aligned | \$1600 |
| col 2 is      |   centered    |   \$12 |
| zebra stripes |   are neat    |    \$1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
| Markdown | Less      | Pretty     |
| -------- | --------- | ---------- |
| _Still_  | `renders` | **nicely** |
| 1        | 2         | 3          |

Blockquotes and citations

This is a Blockquote. This line is part of the same quote.

Blockquotes support basic markdown syntax, like bold strikethroughs and links.

1. As
2. Well
3. As
4. Lists!

– Alison

Code

components/markdown
> This is a Blockquote.
> This line is part of the same quote.
> Blockquotes support basic markdown syntax,
> like **bold** ~~strikethroughs~~ and [links.](#)
> 1. As
> 1. Well
> 1. As
> 1. Lists!
> <cite>– Alison</cite>