Demo MkDocs Material Features¶

Đây là trang demo các tính năng của MkDocs Material, hoàn toàn độc lập với blog.

Tham khảo snippet

📋 Mục lục¶

Admonitions¶

Ghi chú

Đây là một ghi chú quan trọng với Material theme.

Mẹo hay

Bạn có thể dùng nhiều loại admonition khác nhau!

Cảnh báo

Hãy cẩn thận khi thực hiện thao tác này.

Nguy hiểm

Không được làm điều này trong production!

Collapsible Success (Click để mở)

Nội dung này có thể thu gọn được!

Python

print("Hello from collapsed content!")

Mở sẵn (Click để đóng)

Admonition này mở sẵn khi load trang.

Code Blocks¶

Python với syntax highlighting¶

Python

def greet(name: str) -> str:
    """
    Hàm chào hỏi đơn giản

    Args:
        name: Tên người được chào

    Returns:
        Chuỗi chào hỏi
    """
    return f"Xin chào, {name}! 👋"

# Sử dụng
message = greet("Dat")
print(message)

JavaScript với line numbers¶

JavaScript
// Function để tính tổng mảng
function sumArray(arr) {
    return arr.reduce((acc, curr) => acc + curr, 0);
}

const numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // Output: 15

Code với highlighting dòng cụ thể¶

Python

def calculate_total(items):
    # Dòng này được highlight
    total = sum(item['price'] for item in items)
    return total

Inline code¶

Bạn có thể dùng inline code trong câu, hoặc highlight với important code

Tabs¶

PythonJavaScriptC++

Python

print("Đây là code Python")

class Student:
    def __init__(self, name, age):
        self.name = name
        self.age = age

JavaScript

console.log("Đây là code JavaScript");

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

C++

#include <iostream>
using namespace std;

class Student {
    string name;
    int age;
};

Diagrams¶

Mermaid - Flowchart¶

graph LR
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Hold "Alt" / "Option" to enable pan & zoom

Mermaid - Sequence Diagram¶

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Nhập URL
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return data
    Server-->>Browser: HTTP Response
    Browser-->>User: Hiển thị trang

Hold "Alt" / "Option" to enable pan & zoom

Mermaid - Class Diagram¶

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

Hold "Alt" / "Option" to enable pan & zoom

Math¶

Inline Math¶

Công thức Einstein: \(E = mc^2\)

Định lý Pythagoras: \(a^2 + b^2 = c^2\)

Block Math¶

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

\[ \frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x) \]

Ma trận¶

\[ A = \begin{bmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{bmatrix} \]

Icons & Emojis¶

Material Icons¶

Account
GitHub
Love
Rocket
GitHub Octicon

Emojis¶

Lists & Tasks¶

Danh sách có thứ tự¶

Item đầu tiên
Item thứ hai
1. Sub-item 2.1
2. Sub-item 2.2
Item thứ ba

Danh sách không thứ tự¶

Item A
Item B
- Sub-item B.1
- Sub-item B.2
Item C

Task List¶

Hoàn thành task 1
Hoàn thành task 2
Task đang làm
Task chưa làm

Tables¶

Bảng cơ bản¶

Tên	Tuổi	Nghề nghiệp
An	25	Developer
Bình	30	Designer
Chi	28	Manager

Bảng với alignment¶

Left	Center	Right
A	B	C
1	2	3
X	Y	Z

Text Formatting¶

Bold text và italic text

Highlight text

~~Strikethrough~~

H₂O (subscript)

X² (superscript)

Highlighted text và Bold text

Keyboard keys: Ctrl+Alt+Del

Buttons & Links¶

Regular Link

Primary Button

External Link

Footnotes¶

Đây là văn bản với footnote¹ và một footnote khác².

Custom Blocks¶

Ví dụ thực tế

Python

# Demo authentication
from flask import Flask, request

app = Flask(__name__)

@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    # Xử lý authentication
    return {'status': 'success'}

Abbreviations¶

The HTML specification is maintained by the W3C.

Hoàn thành!

Bạn đã xem qua các tính năng chính của MkDocs Material! 🎉

Đây là nội dung footnote đầu tiên. ↩
Đây là footnote thứ hai với nhiều dòng.

Có thể thêm nhiều paragraph trong footnote. ↩