Markdown Feature Showcase

A practical, copyable reference for standard Markdown, GitHub Flavored Markdown (GFM), mathematical formulas, and Mermaid diagrams.

Compatibility note: Markdown renderers differ. Tables, task lists, strikethrough, alerts, footnotes, math, Mermaid, and raw HTML may require a renderer or extension that supports them.

Table of contents

1. Headings and text
2. Links, images, and references
3. Quotes and alerts
4. Lists and tasks
5. Code
6. Tables
7. Formulas
8. Mermaid diagrams
9. Footnotes, definitions, and abbreviations
10. HTML and advanced formatting
11. Escaping and special characters

1. Headings and text

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Alternative level-one heading

Alternative level-two heading

This is a normal paragraph. A blank line starts a new paragraph.

This line ends with two spaces.
Therefore, this text begins on a new line without starting a new paragraph.

Text can be italic, also italic, bold, also bold, or bold and italic. GFM adds strikethrough. Inline HTML can add underlining, highlighting, H2O, x2, and small print.

Use inline code for commands, identifiers, and short literal values. Press Ctrl + K to open search in many applications.

Unicode and emoji work too: ✓ → ∞ 🚀. Some renderers support emoji shortcodes such as :sparkles:.

2. Links, images, and references

Inline and automatic links

• OpenAI
• https://www.example.com
• person@example.com
• A relative link: project guide
• A page fragment: jump to formulas

Reference-style links

Read the Markdown specification or visit the same reference.

Images

Reference-style image:

An image can also be a link:

3. Quotes and alerts

This is a blockquote.

It may contain multiple paragraphs, formatting, and lists:

1. First quoted item
2. Second quoted item

Blockquotes can be nested.

GitHub-style alerts:

Useful information that readers should notice.

A helpful suggestion for completing a task.

Information essential to success.

Something that may cause a problem.

A potentially harmful consequence.

4. Lists and tasks

Unordered list

• First item
• Second item
  • Nested item
  • Another nested item
    1. Ordered child
    2. Another ordered child
• Third item

The * and + markers can also create unordered lists.

Ordered list

1. First step
2. Second step
   1. Nested step
   2. Another nested step
3. Third step

Starting from another number:

1. Item five
2. Item six

Task list (GFM)

• Write the example
• Add formulas
• Add diagrams
• Customize it for your project

Rich list items

1. A list item can contain several paragraphs.

   Indent the continuation to keep it inside the item.

2. It can also contain code:

   indented content inside a list item
   

5. Code

Inline code and escaped backticks

Call console.log("Hello"). To show a backtick inside code, use a longer delimiter: const marker = `;.

Fenced code blocks with syntax highlighting

/** Return a greeting for the supplied name. */
function greet(name = "world") {
  return `Hello, ${name}!`;
}

console.log(greet("Markdown"));

from dataclasses import dataclass


@dataclass
class Point:
    x: float
    y: float

    def magnitude(self) -> float:
        return (self.x**2 + self.y**2) ** 0.5


print(Point(3, 4).magnitude())  # 5.0

set -euo pipefail
printf '%s\n' "Hello from Bash"

{
  "name": "markdown-showcase",
  "features": ["code", "math", "mermaid"],
  "complete": true
}

SELECT category, COUNT(*) AS item_count
FROM products
GROUP BY category
ORDER BY item_count DESC;

Code without highlighting

This is a plain fenced code block.
Markdown characters such as **bold** are not rendered here.

Indented code block

Four leading spaces also create a code block.
Fenced blocks are usually easier to maintain.

Diff

- const greeting = "Hi";
+ const greeting = "Hello";

Chess

8♜ ♝♛♚♝♞♜
7♟♟♟♟ ♟♟♟
6  ♞     
5    ♟   
4  ♗ ♙   
3     ♕  
2♙♙♙♙ ♙♙♙
1♖♘♗ ♔ ♘♖
 abcdefgh

6. Tables

Alignment and inline formatting

Compact table

Markdown tables do not natively support row spans or column spans. Use an HTML table when those features are necessary and raw HTML is allowed.

7. Formulas

Math notation commonly uses LaTeX syntax through a renderer extension.

Inline math

Einstein's mass-energy relation is $E = mc^2$ , and the circle area is $A = \pi r^2$ .

Display math

The quadratic formula:

A definite integral:

A matrix:

A piecewise function:

An aligned derivation:

8. Mermaid diagrams

Mermaid diagrams are written in fenced code blocks tagged mermaid.

Flowchart

flowchart TD
    A[Start] --> B{Valid input?}
    B -- Yes --> C[Process data]
    B -- No --> D[Show error]
    C --> E[Finish]
    D --> E

Sequence diagram

sequenceDiagram
    actor User
    participant App
    participant API
    User->>App: Submit request
    App->>API: POST /items
    API-->>App: 201 Created
    App-->>User: Show result

Class diagram

classDiagram
    class Animal {
        +String name
        +speak() String
    }
    class Dog {
        +fetch() void
    }
    Animal <|-- Dog

State diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> Review: submit
    Review --> Draft: request changes
    Review --> Published: approve
    Published --> [*]

Entity-relationship diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : appears_in
    CUSTOMER {
        int id PK
        string name
    }
    ORDER {
        int id PK
        date created_at
    }

Gantt chart

gantt
    title Example project
    dateFormat YYYY-MM-DD
    section Build
    Design      :done, design, 2026-08-18, 3d
    Implement   :active, build, after design, 5d
    Test        :test, after build, 2d

Pie chart

pie showData
    title Example allocation
    "Development" : 55
    "Testing" : 25
    "Documentation" : 20

Git graph

gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add feature"
    checkout main
    merge feature
    commit id: "Release"

Mind map

mindmap
  root((Markdown))
    Text
      Headings
      Emphasis
    Structure
      Lists
      Tables
    Extensions
      Math
      Mermaid

9. Footnotes, definitions, and abbreviations

Footnotes

Here is a statement with a footnote.¹ A named footnote may be reused.²

Definition list (extension)

Markdown : A lightweight markup language.

Renderer : Software that converts Markdown into HTML or another display format.

Abbreviation (extension)

The HTML specification defines the structure of web pages.

*[HTML]: HyperText Markup Language

10. HTML and advanced formatting

Raw HTML is supported by many—but not all—Markdown renderers.

This content is initially hidden. Depending on the renderer, Markdown inside an HTML block may or may not be processed.

11. Escaping and special characters

Use a backslash to display punctuation that would otherwise have Markdown meaning:

*not italic*
# not a heading
[not a link](https://example.com)
1. not an ordered-list item

Common HTML entities include © → ©, & → &, and < → <.

To discuss Markdown syntax without rendering it, place it in inline code or a fenced code block:

```python
print("Nested fences use a longer outer fence")
```

Quick reference

End of showcase · Made with Markdown