Markdown Features Demo 📝

This page demonstrates ALL the Markdown features available in Docusaurus.

Table of Contents

• Basic Text Formatting
• Headers
• Lists
• Links and Images
• Code Blocks
• Tables
• Admonitions
• Math Equations
• Mermaid Diagrams
• HTML Elements

Basic Text Formatting

Bold text and italic text and bold italic text

Strikethrough text

Inline code with backticks

Blockquote example

Multiple lines in blockquote

Horizontal rule below:

---

Headers

This is H3

This is H4

This is H5

This is H6

Lists

Unordered Lists

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
    • Double nested item 2.2.1
• Item 3

Ordered Lists

1. First item
2. Second item
   1. Nested numbered item
   2. Another nested item
3. Third item

Task Lists

• Completed task
• Incomplete task
• Another completed task

Links and Images

Links

External link to Google

Internal link to intro

Link with title

Images

Code Blocks

Basic Code Block

Plain text code block
No syntax highlighting

JavaScript with Syntax Highlighting

function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome ${name}`;
}

greetUser("World");

Code Block with Title

hello.py

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate fibonacci sequence
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Code Block with Line Numbers

import React from 'react';

function WelcomeComponent({ name }) {
  return (
    <div className="welcome">
      <h1>Welcome {name}!</h1>
      <p>This is a React component</p>
    </div>
  );
}

export default WelcomeComponent;

Code Block with Line Highlighting

# Install Docusaurus
npm create docusaurus@latest my-website classic
cd my-website
npm start
# Your site starts at http://localhost:3000
# Edit docs/intro.md and save to reload

Code Block with Comments Highlighting

interface User {
  id: number;
  name: string;
  email: string;
}

function createUser(userData: Partial<User>): User {
  return {
    id: Math.random(),
    name: userData.name || 'Anonymous',
    email: userData.email || 'no-email@example.com'
  };
}

const newUser = createUser({ name: 'John Doe' });

Tables

Feature	Supported	Notes
Markdown	✅	Full support
MDX	✅	With React components
Math	✅	KaTeX support
Mermaid	✅	Diagram support
Syntax Highlighting	✅	Prism.js

Advanced Table

Left Aligned	Center Aligned	Right Aligned
Item 1	Item 2	Item 3
Bold	Italic	Code
Link		123

Admonitions

ghi chú

This is a note admonition. It's useful for general information.

Pro Tip

This is a tip admonition with a custom title. Use it for helpful advice!

thông tin

This is an info admonition. Great for additional context.

cảnh báo

This is a warning admonition. Use it to alert users about important considerations.

Take Care

This is a danger admonition with custom title. Use it for critical warnings!

Nested Admonitions

Complex Example

This tip contains a nested warning:

cảnh báo

Be careful when using nested admonitions!

And you can use markdown inside admonitions:

• Lists work
• Formatting works
• Code works
• Links work

:::

Math Equations

Inline Math

The quadratic formula is x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

Block Math

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

More Complex Equations

\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac{1}{c}\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac{1}{c}\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

Mermaid Diagrams

Flowchart

Sequence Diagram

Gantt Chart

HTML Elements

Details and Summary

Click to expand

This content is hidden by default and can be revealed by clicking the summary.

• You can use markdown inside details
• Including lists
• And code

console.log("Even code blocks work!");

Custom HTML

Custom Styled Box

This is a custom HTML div with inline styles.

You can mix HTML and Markdown freely!

Keyboard Keys

Press Ctrl + C to copy text.

Use ⌘ + Space on Mac to open Spotlight.

Abbreviations

The HTML specification is maintained by the W3C.

HTML stands for HyperText Markup Language. W3C stands for World Wide Web Consortium.

---

Conclusion

This page demonstrates all the core Markdown features available in Docusaurus. The next step is to explore MDX features that allow you to embed React components directly in your content!

Next: Check out the MDX + React Demo to see advanced features in action.