Github-Markdown.md

i shall update this gist again properly with periodic revisions and remove any duplicate contents. Below i have added quick representation of most features if not all

• Guide
  • Backslash Escapes
  • More than one new Line
  • Emoji
  • Tables
  • Task lists
  • Lists
  • Horizontal rules
  • Links & images
    • Reference links
    • Relative links
  • Quoting code
  • Headers (Headings)
  • Text Styling
  • Block Quotes
  • Allignments
  • Comments
  • <details> html tag
  • Visualise Hex color code
  • Alerts, Notes, Tips, Cautions etc.
• References
• FAQS
  • How can I reference a commit, issue, PR etc. in an issue comment on GitHub?
  • Mention a user or team in commit, issue, PR etc.
  • Section links & Adding Bookmarks
  • Recommended vscode extentions

Guide

Backslash Escapes

syntax

\*literal asterisks\*

output

*literal asterisks*

More than one new Line

syntax

\
\
\
Two blank lines above
<br/><br/><br/>
Two blank lines above

output


Two blank lines above


Two blank lines above

Emoji

http://www.emoji-cheat-sheet.com/

https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md

syntax

:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat:

output 👍 ✨ 🐫 🎉 🚀 🤘

Tables

• To create a table with headers we need to use dashes to separate each header cell and use pipes to separate columns. The outer pipes are optional.
• We can use colons to align columns. By default Left align is used.

syntax

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

<table>
  <tr>
    <th>First Header</th>
    <th>Second Header</th>
  </tr>
  <tr>
    <td>Content from cell 1</td>
    <td>Content from cell 2</td>
  </tr>
  <tr>
    <td>Content in the first column</td>
    <td>Content in the second column</td>
  </tr>
</table>

Default | Left align | Center align | Right align
-|:-|:-:|-:
9999999999 | 9999999999 | 9999999999 | 9999999999
999999999 | 999999999 | 999999999 | 999999999
99999999 | 99999999 | 99999999 | 99999999
9999999 | 9999999 | 9999999 | 9999999

output

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

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

Default	Left align	Center align	Right align
9999999999	9999999999	9999999999	9999999999
999999999	999999999	999999999	999999999
99999999	99999999	99999999	99999999
9999999	9999999	9999999	9999999

Using dashes and spaces to increase readability -

syntax

First | Second
 --   |   --
  1   |   2

output

First	Second
1	2

Now lets display two tables side by side -

syntax

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
<tr>
<td>

A | B | C
-|-|-
1 | 2 | 3

</td>
<td>

A | B | C
-|-|-
1 | 2 | 3

</td>

</tr>
</table>

output

Heading 1	Heading 2
A B C 1 2 3	A B C 1 2 3

Let’s create a table with multiple lines using the HTML <br/> tag.

syntax

A | B | C
-|-|-
1 | 2 | 3 <br/> 4 <br/> 5

A | B | C
-|-|-
1 | 2 | <ul><li>1</li><li>2</li></ul>

output

A	B	C
1	2	3 4 5

A	B	C
1	2	1 2

Task lists

syntax

- [x] Finish my changes
- [ ] Push my commits to GitHub

output

• Finish my changes
• Push my commits to GitHub

Lists

syntax

You can make an unordered list by preceding one or more lines of text with - or *.

- George Washington
- John Adams

To order your list, precede each line with a number.

1. James Madison
1. James Monroe

output

• George Washington
• John Adams

1. James Madison
2. James Monroe

Nested Lists - You can create a nested list by indenting one or more list items below another item.

syntax

1. First list item
   - First nested list item
     - Second nested list item

output

1. First list item
   • First nested list item
     • Second nested list item

Horizontal rules

syntax

***
---
<hr/>

output

---

---

---

Links & images

syntax

[GitHub Pages](https://pages.github.com/)

[GitHub Pages](https://pages.github.com/ "With a Title")

![image](https://picsum.photos/100)

[![N|Solid](https://cldup.com/dTxpPi9lDf.thumb.png)](https://nodesource.com/products/nsolid)

[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)

output

GitHub Pages

GitHub Pages

---

Reference links

If you’re using the same link more the once, then using the reference style would be beneficial since you don’t have to write the link every time, and also, it’s easy to update the link. Moreover, you can use numbers for the reference text. Also, you can use the reference text as the link text.

https://daringfireball.net/projects/markdown/syntax#link

https://daringfireball.net/projects/markdown/syntax#img

syntax

[The-Ultimate-Markdown-Cheat-Sheet][reference text]

[The-Ultimate-Markdown-Cheat-Sheet][1]

[Markdown-Cheat-Sheet]

![Alt text][image-1]

[reference text]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet
[1]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet
[Markdown-Cheat-Sheet]: https://github.com/lifeparticle/The-Ultimate-Markdown-Cheat-Sheet
[image-1]: https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif

output

The-Ultimate-Markdown-Cheat-Sheet

The-Ultimate-Markdown-Cheat-Sheet

Markdown-Cheat-Sheet

Relative links

A relative link is a link that is relative to the current file.

syntax

[Contribution guidelines for this project](docs/CONTRIBUTING.md)
[link to some file](../files/this.docx)

Quoting code

syntax

put your text inside backticks (`) to create single line code: 

    Hi there this is `single line code` 

To format code or text into its own distinct block, use triple backticks (```):

    ```bash
    git status
    git add
    ```

    ```c++
    // comment
    #include<iostream>
    using namespace std;
    ```

    ```diff
    Unchanged Line
    - Removed Line
    + Added Line
    ```
    
    ```css
    .header { color: red; }
    ```

output

Hi there this is single line code

git status
git add

// comment
#include<iostream>
using namespace std;

Unchanged Line
- Removed Line
+ Added Line

.header { color: red; }

Headers (Headings)

syntax

# H1
## H2
### H3
#### H4
##### H5
###### H6

Text Styling

syntax

__Bold__

**Bold**

_Italic_

*Italic*

___Bold-Italic___

***Bold-Italic***

<del>deleted</del>

~~This was mistaken text~~

<ins>inserted</ins>

a<sub>subscripted</sub>

a<sup>superscripted</sup>

<samp>Monospaced</samp>

<table><tr><td>Boxed</td></tr></table>

<kbd>button</kbd>

<code>highlight</code>

`highlight`

output

Bold

Bold

Italic

Italic

Bold-Italic

Bold-Italic

deleted

This was mistaken text

inserted

a_subscripted

a^{superscripted}

Monospaced

Boxed

button

highlight

highlight

Block Quotes

syntax

> The quick brown fox jumps over the lazy dog.
> The quick brown fox jumps over the lazy dog.

> The quick brown fox jumps over the lazy dog.
> The quick brown fox jumps over the lazy dog.
>> The quick brown fox jumps over the lazy dog.
>>> The quick brown fox jumps over the lazy dog.

> **The quick brown fox** *jumps over the lazy dog.*

<blockquote>hi there<br/>hi there</blockquote>

output

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

hi there
hi there

Allignments

syntax

<p style="text-align: center;">
    <img src="https://picsum.photos/100"/>
</p>

<p style="text-align: right;">
    Hi there this is sample text
</p>

output

Hi there this is sample text

Comments

comments are not displayed.

syntax

<!--
    Lorem ipsum dolor sit amet
-->

<details> html tag

syntax

<details>
    <summary>Details</summary>

Something small enough to escape casual notice.
</details>

output

Details

Something small enough to escape casual notice.

Visualise Hex color code

works in comments, issue, prs.

syntax

`#00BFFF`

output

#00BFFF

img output

Alerts, Notes, Tips, Cautions etc.

syntax

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

output

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

References

• https://docs.github.com/en/get-started/writing-on-github
• https://github.github.com/gfm/
• https://daringfireball.net/projects/markdown/syntax

FAQS

How can I reference a commit, issue, PR etc. in an issue comment on GitHub?

See Autolinked references and URLs

Mention a user or team in commit, issue, PR etc.

See Mentioning people and teams

Section links & Adding Bookmarks

You can link directly to a section in a rendered file by hovering over the section heading to expose the link:

Then paste the link from browser into your markdown file -

[My Link](https://github.com/user/project#how-do-i-science)

To add bookmark for sections belonging to same markdown file see how-to-link-to-part-of-the-same-document-in-markdown

you can also refer easily in markdown while editing in vscode using intellisense

Recommended vscode extentions

• Markdown Preview Enhanced
• Markdown All in One

just trying it out
#00BFFF

thanks for the tutorial!

how align text like
a c++
b java
c c
d javascript
e lua
f python
g lisp

a-------------c++
without --

Note

Notas

> [!NOTE]
> Notas

Important

Importante

> [!IMPORTANT]
> Importante

...

Note

Notas

> [!NOTE]
> Notas

Important

Importante

> [!IMPORTANT]
> Importante

...

thanks @adriancmiranda github has official docs on markdown. i shall update this gist again properly with periodic revisions and remove any duplicate contents. Heres the link to writing a github markdown - https://docs.github.com/en/get-started/writing-on-github