Markdown

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

MDX Frontmatter

---
title: Markdown
description: Usage instructions for the Markdown component
keywords: 'ibm,carbon,gatsby,mdx,markdown'
---

Text decoration

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

H2

H3

H4

H5

Code

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

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.

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
5. In markdown, the actual numbers don’t matter, just that it’s a number
6. In markdown, the actual numbers don’t matter, just that it’s a number
7. In markdown, the actual numbers don’t matter, just that it’s a number
8. In markdown, the actual numbers don’t matter, just that it’s a number
9. In markdown, the actual numbers don’t matter, just that it’s a number
10. In markdown, the actual numbers don’t matter, just that it’s a number
11. In markdown, the actual numbers don’t matter, just that it’s a number

• 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

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

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.
```

Tables

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>