# GitHub Flavored Markdown Example

The GitHub Flavored Markdown (GFM) Spec can be found [here](https://github.github.com/gfm/).

## Alerts

> [!NOTE]
> Nulla semper lectus felis, in faucibus lacus dictum eget. Pellentesque mi ligula, rutrum ut tempus eget, ornare tristique diam.

> [!TIP]
> Quisque mattis urna lorem, eget lobortis tellus dignissim porta.

> [!IMPORTANT]
> Cras accumsan augue dui, a finibus turpis euismod vel. Pellentesque consequat dictum tellus, ut cursus enim.

> [!WARNING]
> Duis nunc nulla, finibus ac finibus sed, fringilla in magna.

> [!CAUTION]
> Etiam ac nunc eget mauris rutrum tincidunt. Vivamus neque magna, semper in erat vitae, ultricies tristique ex. Etiam maximus et justo eu eleifend. Morbi eget luctus risus.

See: [Basic writing and formatting syntax – Alerts (GitHub Docs)](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)

## Task Lists

Grocery list:

* [ ] apple
* [x] banana
* [ ] orange
* [x] pear

See: [About task lists (GitHub Docs)](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/about-task-lists)

## Emojis

:angry: :cry: :grin: :kissing: :open_mouth: :smiley:

:ant: :beetle: :cat2: :dog2: :fish: :snail:

:apple: :banana: :cherries: :grapes: :lemon: :strawberry:

:ambulance: :bus: :car: :rocket: :taxi: :truck:

See: <https://api.github.com/emojis>, [emoji-cheat-sheet](https://github.com/ikatyang/emoji-cheat-sheet)

## Collapsed Sections

<details>
<summary>Click Here to Expand Content</summary>

### Lorem Ispum
  
In sed tincidunt felis. Praesent tincidunt sollicitudin risus non tristique. Nullam vitae semper ligula, et fringilla quam. Ut dignissim velit quam, nec sollicitudin ex venenatis vitae. Vivamus sapien tellus, suscipit vel laoreet eu, auctor non neque. Praesent venenatis dignissim arcu, sed egestas lectus accumsan nec.
  
Fusce mollis viverra tempus. Vestibulum orci felis, ultricies ut magna quis, consectetur ultrices mauris. Proin lobortis nibh eu magna fermentum porta.
</details>

See: [Organizing information with collapsed sections (GitHub Docs)](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-collapsed-sections)

## footnotes

Footnote 1 link[^first].

Footnote 2 link[^second].

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

# Tables

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

| Name     | Character |
| ---      | ---       |
| Backtick | `         |
| Pipe     | \|        |

## Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

# Graphs

```mermaid
graph TD
  A[Source] -->|solid| B[Target 1]
  A -.->|dotted| C[Target 2]
  A ==>|thick| D[Target 3]
```


```mermaid
flowchart TD
  A(Start) --> B{Is it sunny?}
  B -- Yes --> C[Go to the park]
  B -- No --> D[Stay indoors]
  C --> E[Finish]
  D --> E
```


```mermaid
graph TD
  subgraph Cloud
    subgraph us-east [US East Region]
      A[Web Server] --> B[App Server]
    end
    subgraph us-west [US West Region]
      C[Web Server] --> D[App Server]
    end
  end
  E[Load Balancer] --> A
  E --> C
```


```mermaid
xychart-beta
    title "Product Sales"
    x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]
    bar [150, 230, 180, 95, 310]
```


```mermaid
xychart-beta
    title "Monthly Revenue"
    x-axis "Month" [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Revenue (USD)" 0 --> 10000
    bar [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]
    line [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]
```


```mermaid
xychart-beta
    title "Planned vs Actual"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]
    line [100, 145, 190, 240, 280, 320, 360, 400]
    line [90, 130, 185, 235, 275, 340, 380, 420]
```



```mermaid
xychart-beta horizontal
    title "Budget vs Actual"
    x-axis [Eng, Sales, Marketing, Product, Ops, HR, Finance, Legal]
    bar [500, 350, 250, 200, 150, 120, 100, 80]
    line [480, 380, 230, 180, 160, 110, 95, 75]
```