Markdown
These are the built-in components that you’ll have access to simply by using Markdown. The whitespace around these components is significant. If you encounter any errors, make sure you format the Markdown and surrounding space properly.
For most pages, we recommend starting with a
PageDescription
AnchorLinks
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, akabold, with **asterisks** or **underscores**. Combined emphasis with **asterisksand _underscores_**. Strikethrough uses two tildes. ~~Scratch this.~~
Headers
Note: It’s generally considered best practice to include just one
h1
h1
h2
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
- First ordered list item
- Item with a nested item
- Nested list item
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- In markdown, the actual numbers don’t matter, just that it’s a number
- 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 temporincididunt ut labore et- dolore magna aliqua. Pharetra massa massa ultricies mi quis. Adipiscing enimeu turpis egestas pretium aenean.- Massa eget egestas purus viverra accumsan in nisl nisi.
1. First ordered list item2. Item with a nested item1. Nested list item3. In markdown, the actual numbers don't matter, just that it's a number4. In markdown, the actual numbers don't matter, just that it's a number
1. First ordered list item1. Item with a nested item1. Nested list item1. In markdown, the actual numbers don't matter, just that it's a number
Links
URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com
<http://www.example.com>
Code
[I'm a markdown link](https://www.carbondesignsystem.com)[I'm a markdown link with title](https://www.carbondesignsystem.com "Carbon'sHomepage")[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
Images
Code
![Alt text goes here](images/quantum.jpg)
Code blocks
You can read in depth about syntax highlighting and advanced code snippet features on the Code blocks page.
Inline
code
back-ticks around
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 codeblock
Code
Inline `code` has `back-ticks around` it.```markdown TitleBlocks have three back-ticks above and below. Pretend the backslashes aren'tthere.```
You can view a list of included languages at the react-prism-renderer repo.
Tables
Colons can be used to align columns.
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | 1 |
col 2 is | centered | 2 |
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 |
| nicely |
1 | 2 | 3 |
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 (|)
Blockquotes and citations
– Paul RandWithout aesthetic, design is either the humdrum repetition of familiar clichés or a wild scramble for novelty. Without aesthetic, the computer is but a mindless speed machine, producing effects without substance, form without relevant content, or content without meaningful form.
Code
> Without aesthetic, design is either the humdrum repetition of familiar clichés> or a wild scramble for novelty. Without aesthetic, the computer is but a> mindless speed machine, producing effects without substance, form without> relevant content, or content without meaningful form.>> <cite>– Paul Rand</cite>
Comments
Comments can be added that will not display on the page, but will be visible in the markdown source.
Code
Comments can be added that will not display on the page, but will be visible inthe markdown source.{/_ Comments like this are visible in code, but are not visible on the page _/}