Skip to content

Latest commit

 

History

History
426 lines (325 loc) · 13.8 KB

GUIDE.md

File metadata and controls

426 lines (325 loc) · 13.8 KB

Markdown Guide

A quick reference to the Markdown syntax.

Table of Contents

  1. Headings
  2. Paragraphs
  3. Line Breaks
  4. Emphasis
  5. Blockquotes
  6. Ordered Lists
  7. Unordered Lists
  8. Horizontal Rules
  9. Links
  10. Images
  11. Code
  12. Code Blocks
  13. Tables
  14. Escaping Characters

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (<h3>), use three number signs (e.g., ### My Header).

Markdown HTML Output
# Jedi Level 1 <h1>Jedi Level 1</h1>

Jedi Level 1
## Jedi Level 2 <h2>Jedi Level 2</h2>

Jedi Level 2
### Jedi Level 3 <h3>Jedi Level 3</h3>

Jedi Level 3
#### Jedi Level 4 <h4>Jedi Level 4</h4>

Jedi Level 4
##### Jedi Level 5 <h5>Jedi Level 5</h5>
Jedi Level 5
###### Jedi Level 6 <h6>Jedi Level 6</h6>
Jedi Level 6

Back to Top

Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text. You should not indent paragraphs with spaces or tabs.

Markdown HTML Output

The Force will be with you.

Always.

<p>The Force will be with you.</p>

<p>Always.</p>

The Force will be with you.

Always.

Back to Top

Line Breaks

To create a line break (<br>), end a line with two or more spaces, and then type return.

Markdown HTML Output
Do. Or do not. · ·
There is no try.		 <p>Do. Or do not.<br>
There is no try.</p>		 Do. Or do not.
There is no try.

Back to Top

Emphasis

You can add emphasis by making text bold or italic.

Bold

To bold text, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters.

Markdown HTML Output
**Bold Text** <strong>Bold Text</strong> Bold Text
Luke **Skywalker** Luke <strong>Skywalker</strong> Luke Skywalker

Italic

To italicize text, add one asterisk or underscore before and after a word or phrase. To italicize the middle of a word for emphasis, add one asterisk without spaces around the letters.

Markdown HTML Output
*Italicized Text* <em>Italicized Text</em> Italicized Text
Han *Solo* Han <em>Solo</em> Han Solo

Bold and Italic

To emphasize text with bold and italics at the same time, add three asterisks or underscores before and after a word or phrase.

Markdown HTML Output
The ***Force***. The <strong><em>Force</em></strong>. The Force

Back to Top

Blockquotes

To create a blockquote, add a > in front of a paragraph.

> Why, you stuck-up, half-witted, scruffy-looking nerf herder!

The rendered output looks like this:

Why, you stuck-up, half-witted, scruffy-looking nerf herder!

Blockquotes with Multiple Paragraphs

Blockquotes can contain multiple paragraphs. Add a > on the blank lines between the paragraphs.

> Why, you stuck-up, half-witted, scruffy-looking nerf herder!
>
> As far as Star Wars insults go, this one takes the cake. No contest.

The rendered output looks like this:

Why, you stuck-up, half-witted, scruffy-looking nerf herder!

As far as Star Wars insults go, this one takes the cake. No contest.

Nested Blockquotes

Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.

> Why, you stuck-up, half-witted, scruffy-looking nerf herder!
>
>> As far as Star Wars insults go, this one takes the cake. No contest.

The rendered output looks like this:

Why, you stuck-up, half-witted, scruffy-looking nerf herder!

As far as Star Wars insults go, this one takes the cake. No contest.

Blockquotes with Other Elements

Blockquotes can contain other Markdown formatted elements. Not all elements can be used — you’ll need to experiment to see which ones work.

> #### Yoda Quotes
>
> - Train yourself to let go of everything you fear to lose.
> - Powerful you have become, the dark side I sense in you.
>
>  Yoda Quotes to *Awake* the **Greatness** Within.

The rendered output looks like this:

Yoda Quotes

  • Train yourself to let go of everything you fear to lose.
  • Powerful you have become, the dark side I sense in you.

Yoda Quotes to Awake the Greatness Within.

Back to Top

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

You can use other elements like; paragraphs, line breaks, links, images, etc ... within each item.

1. First item
1. Second item
1. Third item
1. Fourth item

The rendered output looks like this:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Nested Ordered Lists

To create a nested ordered list, simply add 4 spaces in front of the list item.

1. First item
1. Second item
1. Third item
    1. Indented item
    1. Indented item
1. Fourth item

The rendered output looks like this:

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

Back to Top

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

You can use other elements like; paragraphs, line breaks, links, images, etc ... within each item.

- First item
- Second item
- Third item
- Fourth item

The rendered output looks like this:

  • First item
  • Second item
  • Third item
  • Fourth item

Nested Unordered Lists

To create a nested unordered list, simply add 4 spaces in front of the list item.

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

The rendered output looks like this:

  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

Back to Top

Horizontal Rules

To create a horizontal rule, use three or more dashes (---) on a line by themselves.

---

The rendered output looks like this:

Back to Top

Links

To create a link, enclose the link text in brackets (e.g., [Google]) and then follow it immediately with the URL in parentheses (e.g., (https://google.com)).

[Google](https://google.com/)

Link Titles

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in parentheses after the URL.

[Google](https://google.com/ "Google Search Engine")

Formatting Links

You can format links using Emphasis elements.

*[Google](https://google.com/)*
**[Google](https://google.com/)**
***[Google](https://google.com/)***

Back to Top

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title after the URL in the parentheses.

![MD](https://robohash.org/markdown)

The rendered output looks like this:
MD
 

Linking Images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![MD](https://robohash.org/markdown)](https://robohash.org/)

The rendered output looks like this:
MD
 

Back to Top

Code

To denote a word or phrase as code, enclose it in tick marks (`).

Markdown HTML Output
In the terminal, type `npm install`. In the terminal, type <code>npm install</code>. In the terminal, type npm install.

Escaping Tick Marks

If the word or phrase you want to denote as code includes one or more tick marks, you can escape it by enclosing the word or phrase in double tick marks (``).

Markdown HTML Output
``Use `code` in your Markdown file.`` <code>Use `code` in your Markdown file.</code> Use `code` in your Markdown file.

Back to Top

Code Blocks

To create code blocks, start a line with three tick marks (```).

```
$ npm install --save-dev
```

The rendered output looks like this:

$ npm install --save-dev

Code Block Syntax Highlighting

This allows you to add color highlighting for whatever language your code was written in. To add syntax highlighting, specify a language next to the tick marks before the fenced code block.

```html
<link href="/lib/markdown/markdown.css" rel="stylesheet">
<script src="/lib/markdown/markdown.js"></script>
```

Supported Languages

  • html
  • javascript
  • css
  • json

The rendered output looks like this:

<link href="/lib/markdown/markdown.css" rel="stylesheet">
<script src="/lib/markdown/markdown.js"></script>

back to top

Tables

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. You can optionally add pipes on either end of the table.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

The rendered output looks like this:

Syntax Description
Header Title
Paragraph Text

Alignment

You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

The rendered output looks like this:

Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

back to top

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash () in front of the character.

\* Without the backslash, this would be a bullet in an unordered list.

The rendered output looks like this:

* Without the backslash, this would be a bullet in an unordered list.

Characters You Can Escape

You can use a backslash to escape the following characters.

Character Name
\ Backslash
` Tick Mark
* Asterisk
_ Underscore
{} Curly Braces
[] Brackets
() Parentheses
# Pound Sign
+ Plus Sign
- Minus Sign (Hyphen)
. Dot
! Exclamation Mark
| Pipe

You don't need to always escape these characters. These characters can be escaped, however these will need to be escaped when they are inside another element that uses these characters.

Back to Top