Coder Social home page Coder Social logo

sivamani-18 / markdown-syntax Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 4 KB

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: MIT License

developer-docs diagrams github-docs github-topics markdown-examples markdown-tutorial mermaid mermaid-diagrams project-documentation readme-guide readme-template syntax-highlighting markdown-best-practices readme-best-practices github-readme markdown markdown-syntax documentation

markdown-syntax's Introduction

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

markdown-syntax's People

Contributors

sivamani-18 avatar

Stargazers

Jeevadhasan E avatar Sivasubramaniyam avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.