GitHub Markdown Guide

This repository is about markdown and examples for it

I summarize the book for The Markdown Guide to Matt Cone and take the examples from this book to me which i can remember this examples in my work on github projects and to who want to study markdown the markup language and to be good in write README.md file on projects on github, Enjoy 😉.

---

Headings :

Markdown :

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6

html :

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

The output :

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

---

Paragraphs :

Markdown :

I really like using Markdown.

I think I'll use it from now on.

html :

<p>I really like using Markdown.</p>

<p>I think I'll use it from now on.</p>

The output :

I really like using Markdown.

I think I’ll use it from now on.

---

Line Breaks :

To create a line break (<br>).

Markdown :

This is the first line.
And this is the second line.

html :

<p>
  This is the first line.<br />
  And this is the second line.
</p>

The output :

This is the first line.

And this is the second line.

---

Emphasis :

You can add emphasis by making text bold or italic.

• Bold :

Markdown :

I love **bold text**.

I love **bold text**.

Love**is**bold

html :

I love <strong>bold text</strong>. Love <strong>is</strong> bold

The output :

I love bold text.

Love is bold.

---

• Italic :

Markdown :

The _cat's meow_.

The _cat's meow_.

A*cat*meow

html :

The <em>cat's meow</em>. A <em>cat</em> meow

The output :

The cat’s meow.

A cat meow

---

• Bold and Italic :

Markdown :

**_Important_** text.

**_Important_** text.

**_Important_** text.

**_Important_** text.

html :

<strong><em>Important</em></strong> text.

The output :

Important text.

---

Blockquotes :

Markdown :

> Dorothy followed her through many rooms.

html :

<blockquote>
  <p>Dorothy followed her through many rooms.</p>
</blockquote>

The output :

Dorothy followed her through many rooms.

• Blockquotes with Multiple Paragraphs

Markdown :

> This the first paragraph.
>
> And this is the second paragraph.

html :

<blockquote>
  <p>This the first paragraph.</p>
  <p>And this is the second paragraph.</p>
</blockquote>

The output :

This the first paragraph.

And this is the second paragraph.

---

• Nested Blockquotes :

Markdown :

> This the first paragraph.
>
> > And this is the nested paragraph.

html :

<blockquote>
  <p>This the first paragraph.</p>
  <blockquote>
    <p>And this is the nested paragraph.</p>
  </blockquote>
</blockquote>

The output :

This the first paragraph.

And this is the nested paragraph.

---

• Blockquotes with Other Elements :

Markdown :

> ##### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> _Everything_ is going **well**.

html :

<blockquote>
  <h5>The quarterly results look great!</h5>
  <ul>
    <li>Revenue was off the chart.</li>
    <li>Profits were higher than ever.</li>
  </ul>
  <p><em>Everything</em> is going <strong>well</strong>.</p>
</blockquote>

The output :

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going well.

---

Lists :

• Ordered Lists :

Markdown :

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

5. First item
6. Second item
7. Third item
8. Fourth item

9. First item
10. Second item
11. Third item
12. Fourth item

html :

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

The output :

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

---

• Nesting Ordered List Items :

Markdown :

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

html :

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>
    Third item
    <ol>
      <li>Indented item</li>
      <li>Indented item</li>
    </ol>
  </li>
  <li>Fourth item</li>
</ol>

The output :

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

---

• Unordered Lists :

Markdown :

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

* First item
* Second item
* Third item
* Fourth item

- First item

* Second item

- Third item

* Fourth item

html :

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>

The output :

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

---

• Nesting Unordered List Items :

Markdown :

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

html :

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>
    Third item
    <ul>
      <li>Indented item</li>
      <li>Indented item</li>
    </ul>
  </li>
  <li>Fourth item</li>
</ul>

The output :

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

---

• Adding Elements in Lists :

• Paragraphs

Markdown :

- This is the first list item.
- Here's the second list item.

  I need to add another paragraph below the second list item.

- And here's the third list item.

html :

<ul>
  <li><p>This is the first list item.</p></li>
  <li>
    <p>Here's the second list item.</p>
    <p>I need to add another paragraph below the second list item.</p>
  </li>
  <li><p>And here's the third list item.</p></li>
</ul>

The output :

• This is the first list item.

• Here's the second list item.

  I need to add another paragraph below the second list item.

• And here's the third list item.

---

• Blockquotes

Markdown :

- This is the first list item.
- Here's the second list item.

> A blockquote would look great here.

- And here's the third list item.

html :

<ul>
  <li><p>This is the first list item.</p></li>
  <li>
    <p>Here's the second list item.</p>
    <blockquote>
      <p>A blockquote would look great here.</p>
    </blockquote>
  </li>
  <li><p>And here's the third list item.</p></li>
</ul>

The output :

• This is the first list item.

• Here's the second list item.

  A blockquote would look great here.

• And here's the third list item.

• Code Blocks

Markdown :

1. Open the file.
2. Find the following code block on line 21:

  <html>
    <head>
      <title>Test</title>
  </head>

3. Update the title to match the name of your website.

html :

<ol>
  <li><p>Open the file.</p></li>
  <li>
    <p>Find the following code block on line 21:</p>
    <pre><code>&lt;html&gt;
     &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
     &lt;/head&gt;
    </code></pre>
  </li>
  <li><p>Update the title to match the name of your website.</p></li>
</ol>

The output :

1. Open the file.

2. Find the following code block on line 21:

   <html>
        <head>
         <title>Test</title>
        </head>
       

3. Update the title to match the name of your website.

---

• Images

Markdown :

1. Open the file containing Tux, the Linux mascot.
2. Marvel at its beauty.

![Tux](https://github.com/ahmedbadawihosny/GitHub-Markdown-Guide/blob/main/Img/Linux.png)

3. Close the file.

html :

<ol>
  <li><p>Open the file containing Tux, the Linux mascot.</p></li>
  <li>
    <p>Marvel at its beauty.</p>
    <p><img src="https://github.com/ahmedbadawihosny/GitHub-Markdown-Guide/blob/main/Img/Linux.png" alt="Tux" /></p>
  </li>
  <li><p>Close the file.</p></li>
</ol>

The output :

1. Open the file containing Tux, the Linux mascot.

2. Marvel at its beauty.

   

3. Close the file.

---

Code

Markdown :

At the command prompt, type `nano`.

html :

At the command prompt, type <code>nano</code>.

The output :

At the command prompt, type nano.

• Escaping Tick Marks :

Markdown :

`` Use `code` in your Markdown file. ``

html :

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

The output :

Use `code` in your Markdown file.

• Code Blocks :

In Markdown :

Markdown :

<html>
  <head>
  </head>
</html>

In HTML :

html :

<pre>
  <code>
    &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;/html&gt;
  </code>
</pre>

---

Horizontal Rules :

Markdown :

---
---

---

html :

<hr />

<hr />

<hr />

The output :

---

---

Links :

Markdown :

Use [Github Docs](https://docs.github.com/en).

html :

<p>Use <a href="https://docs.github.com/en">Github Docs</a>.</p>

The output :

Use Github Docs.

• Adding Titles :

Markdown :

Use [Github Docs](https://docs.github.com/en "Github Docs").

html :

<p>
  Use
  <a href="https://docs.github.com/en" title="Github Docs">Github Docs</a>.
</p>

The output :

Use Github Docs.

• URLs and Email Addresses :

Markdown :

<https://eff.org>

<[email protected]>

html :

<a href="https://eff.org">https://eff.org</a>
<a href="mailto:[email protected]">[email protected]</a>

The output :

https://eff.org [email protected]

• Formatting Links :

Markdown :

I love supporting **[EFF](https://eff.org)**.
This is the _[EFF](https://eff.org)_.

html :

<p>
  I love supporting <strong><a href="https://eff.org">EFF</a></strong
  >. This is the <em><a href="https://eff.org">EFF</a></em
  >.
</p>

The output :

I love supporting EFF. This is the EFF.

---

Images

Markdown :

![Computer Science map](https://github.com/ahmedbadawihosny/GitHub-Markdown-Guide/blob/main/Img/Computer%20Science%20map.png "Computer Science map")

html :

<img src="https://github.com/ahmedbadawihosny/GitHub-Markdown-Guide/blob/main/Img/Computer%20Science%20map.png" alt="Computer Science map" title="Computer Science map"
/>

The output :

---

• Image With link

Markdown :

[![image alt text](https://i.imgur.com/sw215.jpeg)](https://imgur.com/gallery/sw215)

html :

<a href="https://imgur.com/gallery/sw215">
  <img src="https://i.imgur.com/sw215.jpeg" />
</a>

---

Escaping Characters :

Markdown :

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

html :

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

The output :

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

---

Characters You Can Escape :

Name	Character
backslash	\
tickmark	`
tickmark	*
tickmark	_
curly braces	{}
brackets	[]
parentheses	()
pound sign	#
plus sign	+
minus sign (hyphen)	-
dot	.
exclamation mark	!

---

Tables :

Markdown :

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

html :

<table>
  <thead>
    <tr class="header">
      <th>Syntax</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>Header</td>
      <td>Title</td>
    </tr>
    <tr class="even">
      <td>Paragraph</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

The output :

Syntax	Description
Header	Title
Paragraph	Text

---

• Alignment Tables:

Markdown :

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

html :

<table>
  <thead>
    <tr class="header">
      <th style="text-align: left;">Syntax</th>
      <th style="text-align: center;">Description</th>
      <th style="text-align: right;">Test Text</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td style="text-align: left;">Header</td>
      <td style="text-align: center;">Title</td>
      <td style="text-align: right;">Here’s this</td>
    </tr>
    <tr class="even">
      <td style="text-align: left;">Paragraph</td>
      <td style="text-align: center;">Text</td>
      <td style="text-align: right;">And more</td>
    </tr>
  </tbody>
</table>

The output :

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

---

Fenced Code Blocks

Markdown :

{
"firstName": "John",
"lastName": "Smith",
"age": 25
}

html :

<pre>
  <code>
    {
      &quot;firstName&quot;: &quot;John&quot;,
      &quot;lastName&quot;: &quot;Smith&quot;,
      &quot;age&quot;: 25
    }
  </code>
</pre>

The output :

  
    {
      "firstName": "John",
      "lastName": "Smith",
      "age": 25
    }
  

---

• Syntax Highlighting

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

html :

<pre>
  <code class="language-json">
    {
      &quot;firstName&quot;: &quot;John&quot;,
      &quot;lastName&quot;: &quot;Smith&quot;,
      &quot;age&quot;: 25
    }
  </code>
</pre>

The output :

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

---

Footnotes

Markdown :

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.

Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

html :

<p>
  Here’s a simple footnote,<a href="#fn1" class="footnote-ref" id="fnre\f1"><sup>1</sup></a>
  and here’s a longer one.<a href="#fn2" class="foot\
note-ref" id="fnref2"><sup>2</sup></a>
</p>
<section class="footnotes">
  <ol>
    <li id="fn1">
      <p>
        This is the first footnote.<a href="#fnref1" class="footnote-back"></a>
      </p>
    </li>
    <li id="fn2">
      <p>Here’s one with multiple paragraphs and code.</p>
      <p>Indent paragraphs to include them in the footnote.</p>
      <p><code>{ my code }</code></p>
      <p>
        Add as many paragraphs as you like.<a href="#fnref2" class="fo\otnote-back"></a>
      </p>
    </li>
  </ol>
</section>

The output :

Here’s a simple footnote,¹ and here’s a longer one.²

1. This is the first footnote.

2. Here’s one with multiple paragraphs and code.

   Indent paragraphs to include them in the footnote.

   { my code }

   Add as many paragraphs as you like.

---

Heading IDs

Markdown :

### My Great Heading {#custom-id}

html :

<h3 id="custom-id">My Great Heading</h3>

The output :

My Great Heading

---

• Linking to Heading IDs

Markdown :

[Heading IDs](#heading-ids)

html :

<a href="#heading-ids">Heading IDs</a>

The output :

Heading IDs

---

Definition Lists

Markdown :

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

html :

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

The output :

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

---

Strikethrough

Markdown :

The world is ~~flat~~ round.

html :

<p>The world is <del>flat</del> round.</p>

The output :

The world is flat round.

---

Task (TODO) Lists

Markdown :

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

The output :

• Write the press release
• Update the website
• Contact the media

---

Automatic URL Linking

Markdown :

http://example.com

html :

<a href="http://example.com">http://example.com</a>

The output :

http://example.com

---

Disabling Automatic URL Linking

Markdown :

`http://www.example.com`

html :

<code>http://www.example.com</code>

The output :

http://www.example.com