Markdown Features Showcase

This repository demonstrates comprehensive support for GitHub Flavored Markdown (GFM) with advanced features including Expressive Code highlighting and Mermaid diagrams.

Basic Markdown
Advanced Features
Expressive Code
Mermaid Diagrams
Best Practices
Best Practices

Basic Markdown

Headings

Six levels of headings using # symbols:

1
# H1 Heading
2

3
## H2 Heading
4

5
### H3 Heading
6

7
#### H4 Heading
8

9
##### H5 Heading
10

11
###### H6 Heading

Text Styling

Bold text using **text** or __text__ Italic text using *text* or _text_ Bold and italic using ***text*** ~~Strikethrough~~ using ~~text~~

Lists

Unordered lists:

Item 1
Item 2
- Nested item
- Another nested item

Ordered lists:

First item
Second item
1. Nested item
2. Another nested item

Task lists:

Completed task
Pending task
Another task

Links and Images

Basic link Image with alt text

Code Formatting

Inline code: git status

Code blocks with syntax highlighting:

1
function greet(name) {
2
  console.log(`Hello, ${name}!`)
3
  return `Welcome to GitHub, ${name}`
4
}

Blockquotes

This is a blockquote

It can span multiple lines

And be nested

Tables

Feature	Syntax	Example
Bold	`text`	Bold text
Italic	`text`	Italic text
Code	`code`	`Inline code`

Mathematical Expressions

C_L

Inline math: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

Block math:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

L = \frac{1}{2} \rho v^2 S C_L

L = \frac{1}{2} \rho v^2 S C_L

Footnotes

You can add footnotes¹ to provide additional information.

Advanced Features

Emojis

Common emojis: 👍 ❤️ 😄 🚀 ⭐ 🎉

Color Models

Hex: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)

Alerts

Note: Useful information that users should know.

Tip: Helpful advice for doing things better.

Important: Key information users need to know.

Warning: Urgent info that needs immediate attention.

Caution: Advises about risks or negative outcomes.

Expressive Code

This repository supports Expressive Code for advanced code highlighting with full VS Code theme support, accurate syntax highlighting, and plugin features.

Line Numbers

1
function calculateFibonacci(n) {
2
  if (n <= 1) {
3
    return n
4
  }
5
  return calculateFibonacci(n - 1) + calculateFibonacci(n - 2)
6
}

Editor Frames

1
interface User {
2
  id: number
3
  name: string
4
  email: string
5
  isActive: boolean
6
}
7

8
class UserService {
9
  private users: User[] = []
10

11
  addUser(user: User): void {
12
    this.users.push(user)
13
  }
14

15
  getUserById(id: number): User | undefined {
16
    return this.users.find((user) => user.id === id)
17
  }
18
}

Terminal Frames

$ npm install expressive-code
$ npm run build
$ npm start

Text and Line Markers

1
function demo() {
2
  console.log("this line is marked as deleted")
3
  // These lines are marked as inserted
4
  console.log("this is the second inserted line")
5
  return "Multiple matches of the given text are supported"
6
}

Word Wrap

1
.container {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: center;
5
  align-items: center;
6
  min-height: 100vh;
7
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
8
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9
}

Collapsible Sections


5 collapsed lines
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Advanced Web Application</title>
6
  </head>
7
  <body>
8
    <header>
9
      <nav>
10
        <ul>
11
          <li><a href="#home">Home</a></li>
3 collapsed lines
12
          <li><a href="#about">About</a></li>
13
        </ul>
14
      </nav>
15
    </header>
16
    <main>
17
      <section id="hero">
18
        <h1>Welcome to Our Platform</h1>
19
        <p>Discover amazing features</p>
20
      </section>
21
    </main>
22
  </body>
23
</html>

Combined Features

1
interface ApiResponse<T> {
2
  data: T
3
  status: number
4
  message: string
5
}
6

7
async function fetchUserData(userId: number): Promise<ApiResponse<User>> {
8
  try {
9
    const response = await fetch(`/api/users/${userId}`)
10
    const data = await response.json()
11

12
    return {
13
      data,
14
      status: response.status,
15
      message: "Success",
16
    }
17
  } catch (error) {
18
    throw new Error(`Failed to fetch user data: ${error.message}`)
19
  }
20
}

Theme Support

1
{
2
  "editor.theme": "github-dark",
3
  "workbench.colorTheme": "GitHub Dark",
4
  "terminal.integrated.colorScheme": "github-dark"
5
}

Mermaid Diagrams

This repository supports Mermaid diagrams for creating various types of visual diagrams.

Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

Sequence Diagram

sequenceDiagram
    participant User
    participant System
    User->>System: Login Request
    System->>User: Authentication Token
    User->>System: API Call
    System->>User: Response

Class Diagram

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Error Diagram

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

Best Practices

Use headings for structure - Create a clear hierarchy
Keep it readable - Use appropriate formatting without overdoing it
Test your markdown - Preview before committing
Use descriptive link text - Instead of “click here”
Include alt text for images - For accessibility
Use task lists for progress tracking - Great for project management
Leverage alerts for important information - But use sparingly

Best Practices

Another one

This showcase demonstrates all the major GitHub Flavored Markdown features supported by this repository, including advanced Expressive Code highlighting and Mermaid diagram support.

Footnotes

This is a footnote reference. ↩