Elementary Readme 📑 🎨

Elementary Readme is a collection of Markdown elements that we can use to quickly create our documentation in GitHub Readmes. Feel free to reference it if you want to remember how to add basic elements to your documentation, also fee to contribute adding more common elements that we use to create documentation.

Table of Contents (TOC)

Table of Contents
=================
* [Elemental Readme](#elemental-readme)
   * [Insert an image](#insert-an-image)
   * [Insert a GIF](#insert-a-gif)
   * [Links](#links)
   * [Insert emojis](#insert-emojis)
   * [Insert code](#insert-code)
   * [List](#list)
   * [Tables](#tables)
   * [Mermaid diagrams](#mermaid-diagrams)
   * [Checklist](#checklist)
   * [Audio](#audio)
   * [Video](#video)

Result ⬇️

Table of Contents

• Elemental Readme
  • Insert an image
  • Insert a GIF
  • Links
  • Insert emojis
  • Insert code
  • List
  • Tables
  • Mermaid diagrams
  • Checklist
  • Audio
  • Video

📚 For long files, you can autogenerate the table of contents TOC, see more Generate TOC 'Table Of Content'

Badges

![Python](https://img.shields.io/badge/python-v3.6+-blue.svg)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen.svg)
![Python](https://img.shields.io/badge/PRs-welcome-blueviolet)

Result ⬇️

📚 Create your own url badget in shields.io

Quotes

> “It is only when we take chances, when our lives improve. The initial and the most difficult risk that we need to take is to become honest. —Walter Anderson

Result ⬇️

“It is only when we take chances, when our lives improve. The initial and the most difficult risk that we need to take is to become honest. —Walter Anderson

Bold, Italics and Underline

This is **bold text**, this is *italic text*, we can also cross out a ~~word~~ or phrase amd this text is ***bold an italic***

This is bold text, this is italic text, we can also cross out a word or phrase amd this text is bold an italic

Insert an Image

  <p align="center">
    <img width="300" height="300" src="img/octopus-bb.png">
  </p>

Result ⬇️

Insert a GIF

The same way how image is inserted

  <p align="center">
    <img width="300" height="280" src="img/daftpunktocat-guy.gif">
  </p>

Result ⬇️

Mermaid diagrams

# FlowChart
    ```mermaid
    flowchart TD
    A[start]-->|Text| B(Round)
    B-->C{Decision}
    C-->|One| D[Result 1]
    C-->|Two| E[Result 2]
    ```

Result ⬇️

flowchart TD
A[start]-->|Text| B(Round)
B-->C{Decision}
C-->|One| D[Result 1]
C-->|Two| E[Result 2]

Loading

# Flow Vhart
    ```mermaid
    flowchart LR
        A:::someclass --> B
        classDef someclass fill:#f96;
    ```

Result ⬇️

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

Loading

# Flow Chart with references
    ```mermaid
    flowchart LR
        A-->B
        B-->C
        C-->D
        D-->E
        click A "http://www.github.com" _blank
        click B "http://www.github.com" "Open this in a new tab" _blank
        click C href "http://www.github.com" _blank
        click D href "http://www.github.com" "Open this in a new tab" _blank
    ```

Result ⬇️

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank

Loading

📚 More about Mermaid diagrams

References

# To external resources
[Complete list of github markdown emoji markup](https://gist.github.com/rxaviers/7360908)

Result ⬇️

Complete list of github markdown emoji markup

# To same Readme page
[Go to another topic in the same Readme](#badgets)

Result ⬇️

Go to another topic in the same Readme

# To another Readme on this directory
[Go to another Readme in this workspace](other/Readme.md)

Result ⬇️

Go to another Readme in this workspace

Insert emojis

:blush: :sweat_drops: :innocent: :turtle: :paw_prints: :tulip: :santa: :bulb: :postal_horn: :dart: :grapes:

Result ⬇️

😊 💦 😇 🐢 🐾 🌷 🎅 💡 📯 🎯 🍇

📚 You can copy and paste emojis from this: Complete list of github markdown emoji markup

Insert code

    # Bash  
    ```bash
    echo "Hello World!"
    ``` 

    # Python
    ```python
    print("Hello, World!")
    ```

    # Html
    ```html   
    <img src="images/firefox-icon.png" alt="My test image">
    ```

Result ⬇️

echo "Hello World!"

print("Hello, World!")

<img src="images/firefox-icon.png" alt="My test image">

Lists

- One
- Two
- Three
  - Three one
    - Other

Result ⬇️

• One
• Two
• Three
  • Three one
    • Three one one
    • Three one two

1. One
2. Two
3. Three

Result ⬇️

1. One
2. Two
3. Three

Tables

Table 01

| Value   | Description |
|---------|-------------|
| 1       | Meli        |
| 2       | Aline       |
| 3       | Elian       |

Result ⬇️

Value	Description
1	Meli
2	Aline
3	Elian

Table 02

| Code   | Person            | Fruits     | Plants      |
|--------|-------------------|------------|-------------|
| 1      | :raising_hand:    | :grapes:   |  :mushroom: |
| 2      | :older_woman:     | :tomato:   |  :tulip:    |
| 3      | :man_with_turban: | :eggplant: |  :seedling: |

Result ⬇️

Code	Person	Fruits	Plants
1	🙋	🍇	🍄
2	👵	🍅	🌷
3	👳‍♂️	🍆	🌱

Checklist

- [x] **Fruits** :grapes:
  - :heavy_check_mark: Apples
  - :heavy_check_mark: Oranges
- [X] **Animals**  :turtle:
  - :heavy_check_mark: Dog
  - :heavy_check_mark: Cat
- [ ] **Objets**  ::guitar::

Result ⬇️

• Fruits 🍇
  • ✔️ Apples
  • ✔️ Oranges
• Animals 🐢
  • ✔️ Dog
  • ✔️ Cat
• Objets ::guitar::

Keyboard input

<kbd>ALT + F4</kbd> 
<kbd>CTRL + C</kbd> 
<kbd>CTRL + V</kbd> 

Result ⬇️

ALT + F4 CTRL + C CTRL + V

Video

Simple

[<img src="https://img.youtube.com/vi/fKopy74weus/maxresdefault.jpg" width="60%">](https://youtu.be/fKopy74weus)

Result ⬇️

Customized

<div align="left">
      <a href="https://youtu.be/fKopy74weus">
        <img src="https://img.youtube.com/vi/fKopy74weus/maxresdefault.jpg" width="480"
             alt="imagine-dragons">
      </a>
</div>

Result ⬇️

Footnote

  Here is a simple footnote[^1].

  [^1]: My reference.

Result ⬇️

Here is a simple footnote¹.

Footnotes

1. My reference. ↩