Skip to content

Instantly share code, notes, and snippets.

@cuonggt
Last active January 31, 2023 01:41
Embed
What would you like to do?
The Ultimate Guide to Markdown

Markdown Guide

The Ultimate Guide to Markdown

Basic Markdown Formatting

Headings

# This is an <h1> tag
## This is an <h2> tag
### This is an <h3> tag
#### This is an <h4> tag
##### This is an <h5> tag
###### This is an <h6> tag

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

Result:

This text will be italic

This will also be italic

This text will be bold

This will also be bold

You can combine them

Lists

Inordered:

* Milk
* Bread
    * Wholegrain
* Butter

Result:

  • Milk
  • Bread
    • Wholegrain
  • Butter

Ordered:

1. Tidy the kitchen  
2. Prepare ingredients  
3. Cook delicious things

Result:

  1. Tidy the kitchen
  2. Prepare ingredients
  3. Cook delicious things

Images

![Alt Text](url)

Result:

m'lady

Links

[link](http://example.com)

Result:

link

Blockquotes

As Kanye West said:

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

Result:

As Kanye West said:

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

Horizontal Rules

---

Result:


Code Snippets

Indenting by 4 spaces will turn an entire paragraph into a code-block.

Result:

.my-link {
    text-decoration: underline;
}

Reference Lists & Titles

**The quick brown [fox][1], jumped over the lazy [dog][2].**

[1]: https://en.wikipedia.org/wiki/Fox "Wikipedia: Fox"
[2]: https://en.wikipedia.org/wiki/Dog "Wikipedia: Dog"

Result:

The quick brown fox, jumped over the lazy dog.

Escaping

\*literally\*

Result:

*literally*

Embedding HTML

<button class="button-save large">Big Fat Button</button>

Result:

Big Fat Button

Advanced Markdown

Note: Some syntax which is not standard to native Markdown. They're extensions of the language.

Strike-throughs

~~deleted words~~

Result:

deleted words

Highlights

Work in Ghost:

==oooh fancy==

Result:

==oooh fancy==

Automatic Links

https://ghost.org

Result:

https://ghost.org

Markdown Footnotes

Work in Ghost:

The quick brown fox[^1] jumped over the lazy dog[^2].

[^1]: Foxes are red
[^2]: Dogs are usually not red

Result:

The quick brown fox1 jumped over the lazy dog2.

GitHub Flavored Markdown

Syntax Highlighting

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```

Result:

function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

Task Lists

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Result:

  • @mentions, #refs, links, formatting, and tags supported
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

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 |:

First Header Second Header
Content from cell 1 Content from cell 2
Content in the first column Content in the second column

SHA references

Any reference to a commit’s SHA-1 hash will be automatically converted into a link to that commit on GitHub.

16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac

Issue references within a repository

Any number that refers to an Issue or Pull Request will be automatically converted into a link.

#1
mojombo#1
mojombo/github-flavored-markdown#1

Username @mentions

Typing an @ symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re mentioning the individual. You can also @mention teams within an organization.

Emoji

GitHub supports emoji! Check out the Emoji Cheat Sheet.

References

Footnotes

  1. Foxes are red

  2. Dogs are usually not red

@ProsperousHeart
Copy link

Could you also please add HTML alerts? :)

@Ravijoshicoder
Copy link

I wants to highlight the text ==text== but this isn't working at all. is it only work on ghost platform if yes then how I can use it on github

@Scwestbrook
Copy link

Can I insert plain HTML?

@dmitryweiner
Copy link

<button> doesn't work (in 2021).

@akramnarejo
Copy link

Can I insert plain HTML?

yes you can.

@bitboy85
Copy link

bitboy85 commented Jan 2, 2022

Just a note for myself. You can underline with html tag:

<ins>Hello World</ins> => Hello World

@Kernix13
Copy link

Scwestbrook, yes you can use some HTML tags for additional styling. I tested all the tags and found the ones that work. Check out my Markdown Cheatsheet

@chandanmalla
Copy link

chandanmalla commented Dec 14, 2022

@cuonggt Add this

Highlighting the changes

'''diff

plus(+) new code
minus(-) old code

'''
Result:

+ new code
- old code

@uzluisf
Copy link

uzluisf commented Jan 8, 2023

Collapsible sections using

<details>
   <summary></summary>
</details>

For example

    <details>
    <summary>Recursive quicksort implemented in Raku.</summary>

    ```raku
    multi quicksort([]) { () }
    multi quicksort([$pivot, *@rest]) {
        my $before := @rest.grep(* before $pivot);
        my $after  := @rest.grep(* !before $pivot);
        flat quicksort($before), $pivot, quicksort($after)
    }
    ```
    </details>

results in

Recursive quicksort implemented in Raku.
 multi quicksort([]) { () }
 multi quicksort([$pivot, *@rest]) {
     my $before := @rest.grep(* before $pivot);
     my $after  := @rest.grep(* !before $pivot);
     flat quicksort($before), $pivot, quicksort($after)
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment