Skip to content

here is a comprehensive list of Markdown syntax along with examples for use in your README.md file, including Mermaid diagrams and code blocks for various programming languages.

License

Notifications You must be signed in to change notification settings

Sivamani-18/Markdown-Syntax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

Markdown Syntax

This is a comprehensive list of Markdown syntax along with examples for use in your README.md file, including Mermaid diagrams and code blocks for various programming languages.

Table of Contents

  1. Headings
  2. Lists
  3. Links
  4. Images
  5. Blockquotes
  6. Inline Code
  7. Code Blocks
  8. Tables
  9. Horizontal Line
  10. Bold and Italics
  11. Mermaid Diagrams

Headings Syntax

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Example of Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists Syntax

Unordered List:

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
- Item 3

Ordered List:

1. First item
2. Second item
3. Third item
   1. Subitem 3.1
   2. Subitem 3.2

Example of Unordered List

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
  • Item 3

Example of Ordered List

  1. First item
  2. Second item
  3. Third item
    1. Subitem 3.1
    2. Subitem 3.2

Links Syntax

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

Example of Links

GitHub

Images Syntax

![Image Alt Text](https://via.placeholder.com/150)

Example of Images

Image Alt Text

Blockquotes Syntax

> This is a blockquote.

Example of Blockquotes

This is a blockquote.

Inline Code Syntax

Inline `code` example.

Example of Inline Code

Inline code example.

Code Blocks Syntax

Add ``` at the end of all code blocks Syntax.

JavaScript:

```javascript
function greet() {
    console.log("Hello, world!");
}
greet();

Python:

```python
def greet():
    print("Hello, world!")

greet()

Shell:

```sh
echo "Hello, world!"

Example of Code Blocks

JavaScript:

function greet() {
    console.log("Hello, world!");
}
greet();

Python:

def greet():
    print("Hello, world!")

greet()

Shell:

echo "Hello, world!"

Tables Syntax

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data 1   | Data 2   |
| Row 2    | Data 3   | Data 4   |

Example of Tables

Header 1 Header 2 Header 3
Row 1 Data 1 Data 2
Row 2 Data 3 Data 4

Horizontal Line Syntax

---

Example of Horizontal Line


Bold and Italics Syntax

**Bold Text**
*Italic Text*
***Bold and Italic Text***

Example of Bold and Italics

Bold Text Italic Text Bold and Italic Text

Mermaid Diagrams Syntax

Add ``` at the end of all mermaid diagrams Syntax.

Flowchart:

```mermaid
graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E[End]

Sequence Diagram:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram:

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

State Diagram:

```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Entity Relationship Diagram:

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string address
        string phone
    }
    ORDER {
        int orderNumber
        string date
    }
    LINE-ITEM {
        string productCode
        int quantity
        float price
    }

Gantt Chart:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-01-12  , 12d
    another task     : 24d

Pie Chart:

```mermaid
pie
    title Key Metrics
    "Sales" : 35
    "Marketing" : 20
    "Development" : 25
    "Customer Support" : 20

Git Graph:

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

Example of Mermaid Diagrams

Flowchart:

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E[End]
Loading

Sequence Diagram:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Loading

Class Diagram:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
Loading

State Diagram:

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Loading

Entity Relationship Diagram:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string address
        string phone
    }
    ORDER {
        int orderNumber
        string date
    }
    LINE-ITEM {
        string productCode
        int quantity
        float price
    }
Loading

Gantt Chart:

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-01-12  , 12d
    another task     : 24d
Loading

Pie Chart:

pie
    title Key Metrics
    "Sales" : 35
    "Marketing" : 20
    "Development" : 25
    "Customer Support" : 20
Loading

Git Graph:

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
Loading