Github Flavored Markdown Ultimate Guide

Some examples for using GFM to build a better markdown.

Contents

• Github Flavored Markdown Ultimate Guide
  • Contents
  • Alerts
  • Fold
  • Sentence with Footnote
  • Definition
  • Keyboard
  • Mermaid
  • Task list

Alerts

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

Source code

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Fold

Click to reveal!

Looks like you click me!

Source code

<details>
    <summary>Click to reveal!</summary>
    Looks like you click me!
</details>

Sentence with Footnote

This is a sentence with footnote¹!

Source code

This is a sentence with footnote[^1]!

[^1]: This is the footnote!

Note

[^1] is just after the sentence, there is no need to put it in the end.

Definition

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

Source code

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

Keyboard

Use Ctrl+C to copy.

Source code

Use <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy.

Mermaid

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

Loading

Source code

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

Task list

• Not completed yet.
• Completed.

Source code

- [ ] Not completed yet.
- [x] Completed.

Footnotes

1. This is the footnote! ↩