Skip to content

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

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
1
2
3
4
5
6
7
// 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¤

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ự¤

  1. Item đầu tiên
  2. Item thứ hai
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. 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

H2O (subscript)

X2 (superscript)

Highlighted text và Bold text

Keyboard keys: Ctrl+Alt+Del

Regular Link

Primary Button

External Link

Footnotes¤

Đây là văn bản với footnote1 và một footnote khác2.

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! 🎉

  1. Đây là nội dung footnote đầu tiên. ↩

  2. Đây là footnote thứ hai với nhiều dòng.

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