🦒 GitHub Markdown Zoo

A comprehensive demonstration of GitHub Flavored Markdown features and how they render.

📚 Table of Contents

• Basic Text Formatting
• Headers
• Lists
  • Unordered Lists
  • Ordered Lists
  • Task Lists
• Links & References
  • Direct Links
  • Reference Links
  • Section Links
  • URLs and Email
• Images
  • Direct Image
  • Reference Image
• Blockquotes
• Horizontal Rules
• Code
  • Inline Code
  • Code Blocks
  • Syntax Highlighted Code
• Tables
  • Aligned Tables
• Extended Features
  • Alerts (GitHub-specific Callouts)
  • Footnotes
  • Emoji
  • Keyboard Keys
  • Details/Summary
  • Mermaid Diagrams
  • Syntax Highlighting with Diff
• Advanced Tips
  • Escaping Characters
  • HTML Support
• Contributing

📝 Basic Text Formatting

Plain text looks like this.

This text is italicized or this too

This text is bold or this too

This text is bold and italic or this too

This text is crossed out

This text has a code span in it

View Markdown source

Plain text looks like this.

*This text is italicized* or _this too_

**This text is bold** or __this too__

***This text is bold and italic*** or ___this too___

~~This text is crossed out~~

This text has a `code span` in it

🔤 Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

View Markdown source

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

📋 Lists

Unordered Lists

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
• Item 3

View Markdown source

* Item 1
* Item 2
  * Nested item 2.1
  * Nested item 2.2
* Item 3

Ordered Lists

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

View Markdown source

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

Task Lists

• Completed task
• Uncompleted task
• Another task

View Markdown source

- [x] Completed task
- [ ] Uncompleted task
- [ ] Another task

🔗 Links & References

Direct Links

Visit GitHub

Reference Links

GitHub Markdown Guide

View Markdown source

### Direct Links
[Visit GitHub](https://github.com)

### Reference Links
[GitHub][1]
[Markdown Guide][2]

[1]: https://github.com
[2]: https://www.markdownguide.org

Section Links

Go to Basic Text Formatting

View Markdown source

[Go to Basic Text Formatting](#basic-text-formatting)

URLs and Email

Auto-linked URL: https://github.com Auto-linked email: [email protected]

View Markdown source

Auto-linked URL: https://github.com
Auto-linked email: [email protected]

📸 Images

Direct Image

Reference Image

View Markdown source

### Direct Image
![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

### Reference Image
![Git Logo][git-logo]

[git-logo]: https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png

💭 Blockquotes

This is a blockquote

It can span multiple lines

And can be nested

View Markdown source

> This is a blockquote
> 
> It can span multiple lines
>> And can be nested

📏 Horizontal Rules

---

---

---

View Markdown source

---
***
___

💻 Code

Inline Code

Use git status to list all files that haven't been committed.

View Markdown source

Use `git status` to list all files that haven't been committed.

Code Blocks

This is a code block
No syntax highlighting

Syntax Highlighted Code

def hello_world():
    print("Hello, Markdown Zoo!")

function helloWorld() {
    console.log("Hello, Markdown Zoo!");
}

{
    "greeting": "Hello, Markdown Zoo!",
    "type": "JSON"
}

View Markdown source

```
This is a code block
No syntax highlighting
```

```python
def hello_world():
    print("Hello, Markdown Zoo!")
```

```javascript
function helloWorld() {
    console.log("Hello, Markdown Zoo!");
}
```

```json
{
    "greeting": "Hello, Markdown Zoo!",
    "type": "JSON"
}
```

📊 Tables

Header 1	Header 2	Header 3
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3

View Markdown source

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |

Aligned Tables

Left	Center	Right
Left	Center	Right
Aligned	Aligned	Aligned

View Markdown source

| Left | Center | Right |
|:-----|:------:|------:|
|Left|Center|Right|
|Aligned|Aligned|Aligned|

🎨 Extended Features

Alerts (GitHub-specific Callouts)

Note

Highlights information that users should take into account, even when skimming. For example, this is how you notify users about prerequisites or general information they shouldn't skip.

Tip

Optional information to help a user be more successful. For instance, here's a faster way to complete this task using keyboard shortcuts.

Important

Crucial information necessary for users to succeed. For example, you must have administrator privileges to perform these actions.

Warning

Critical content demanding immediate user attention due to potential risks. For example, proceeding with this action will permanently delete your data.

Caution

Negative potential consequences of an action. For example, this API will be deprecated in the next release, consider using the new endpoint instead.

View Markdown source

> [!NOTE]  
> Highlights information that users should take into account, even when skimming. For example, this is how you notify users about prerequisites or general information they shouldn't skip.

> [!TIP]
> Optional information to help a user be more successful. For instance, here's a faster way to complete this task using keyboard shortcuts.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed. For example, you must have administrator privileges to perform these actions.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks. For example, proceeding with this action will permanently delete your data.

> [!CAUTION]
> Negative potential consequences of an action. For example, this API will be deprecated in the next release, consider using the new endpoint instead.

Footnotes

Here's a sentence with a footnote¹ (See the bottom of the rendered page).

View Markdown source

Here's a sentence with a footnote[^1].

[^1]: This is the footnote content.

Emoji

😄 🚀

View Markdown source

:smile: :rocket: :octocat:

Keyboard Keys

Press Ctrl + C to copy

View Markdown source

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy

Details/Summary (Collapsible Content)

Click to expand!

This content is hidden by default but can be revealed by clicking!

View Markdown source

<details>
<summary>Click to expand!</summary>

This content is hidden by default but can be revealed by clicking!
</details>

Mermaid Diagrams

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Loading

View Markdown source

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Syntax Highlighting with Diff

- This line was removed
+ This line was added

View Markdown source

```diff
- This line was removed
+ This line was added
```

📌 Advanced Tips

Escaping Characters

*This text has literal asterisks*

# This is not a header

View Markdown source

\*This text has literal asterisks\*

\# This is not a header

HTML Support

^Superscript and _subscript

Centered text using HTML

View Markdown source

<sup>Superscript</sup> and <sub>subscript</sub>

<div align="center">
Centered text using HTML
</div>

---

🎉 Contributing

Feel free to contribute to this Markdown Zoo by:

1. Forking the repository
2. Creating a new branch
3. Making your changes
4. Submitting a pull request

Footnotes

1. This is the footnote content. ↩