Demo những tính năng trình bày của Mark Down Editor

1. Markdown căn bản

Bold Italic Underline Strikethrough Highlight Inline $a^2+b^2=c^2$ My links

information dangeruos remider custom color

1. Danh sách không thứ tự (Unordered List):

   • Mục 1
   • Mục 2
     • Mục 2.1
     • Mục 2.2
   • Mục 3

2. Danh sách có thứ tự (Ordered List):

   1. Bước đầu tiên
   2. Bước thứ hai
      1. Bước thứ hai chấm một
      2. Bước thứ hai chấm hai
   3. Bước thứ ba

3. Chèn mã lệnh (Inline Code)
   Để in ra màn hình, bạn có thể sử dụng console.log('Hello, World!');.

4. Trích dẫn (Blockquotes)

   Đây là một đoạn trích dẫn. Bạn có thể sử dụng nó để nhấn mạnh một phần nội dung.

5. Chia dòng ngang (Horizontal Rule)

   ---

6. Bảng (Tables):

7. Chú thích chân trang (Footnotes):
   Đây là một ví dụ về chú thích chân trang^[1].

8. Danh sách tác vụ (Task Lists):

   • [x] Hoàn thành công việc A
   • [ ] Chưa hoàn thành công việc B
   • [ ] Chưa hoàn thành công việc C

9. Expand Collapse

10. Tree

2. Markdown nhúng đối tượng

1. Ảnh
   

2. Video

3. Toán

1. Định lý Stokes trong giải tích vector:

   $${\int }_{\partial S}\mathbf{F}\cdot d\mathbf{r}={\iint }_S(\nabla \times \mathbf{F})\cdot d\mathbf{S}$$

   Đây là một công thức liên hệ giữa tích phân đường của một trường vector trên một đường cong kín và tích phân bề mặt của rot của trường vector đó.

2. Biến đổi Fourier trong giải tích:

   $$\hat{f}(\xi )={\int }_{-\infty }^{\infty }f(x)e^{-2\pi i\xi x}dx$$

   Công thức này chuyển một hàm từ miền thời gian sang miền tần số.

3. Phương trình Schrödinger trong cơ học lượng tử:

   $$i\hslash \frac{\partial \psi }{\partial t}=-\frac{{\hslash }^2}{2m}{\nabla }^2\psi +V\psi$$

   Đây là phương trình sóng miêu tả hành vi của hạt trong cơ học lượng tử.

4. Định lý Gauss về trường điện từ:

   $$\nabla \cdot \mathbf{E}=\frac{\rho }{{ϵ}_0}$$

   Công thức này miêu tả sự phân bố điện tích tạo ra trường điện.

5. Phương trình Navier-Stokes trong thủy động lực học:

   $$\rho \left(\frac{\partial \mathbf{u}}{\partial t}+(\mathbf{u}\cdot \nabla )\mathbf{u}\right)=-\nabla p+\mu {\nabla }^2\mathbf{u}+\mathbf{f}$$

   Đây là phương trình mô tả chuyển động của chất lỏng.

6. Hàm phân bố Boltzmann trong vật lý thống kê:

   $$f(\mathbf{r},\mathbf{v},t)=A\exp \left(-\frac{m{v}^2}{2k_{B}T}\right)$$

   Đây là hàm miêu tả phân bố vận tốc của các hạt trong khí lý tưởng.

7. Phương trình Einstein trong thuyết tương đối rộng:

   $$R_{\mu \nu }-\frac{1}{2}{g}_{\mu \nu }R+g_{\mu \nu }\Lambda =\frac{8\pi G}{c^4}{T}_{\mu \nu }$$

   Đây là phương trình mô tả mối quan hệ giữa hình học của không-thời gian và năng lượng, động lượng trong đó.

8. Chuỗi Taylor của hàm số phức:

Đây là công thức biểu diễn một hàm số phức dưới dạng một chuỗi vô hạn các đạo hàm của nó.

9. Phương trình Euler-Lagrange trong cơ học cổ điển:

   $$\frac{d}{dt}\left(\frac{\partial L}{\partial {\dot{q}}_i}\right)-\frac{\partial L}{\partial q_i}=0$$

   Đây là phương trình cơ bản trong cơ học cổ điển cho hệ thống bảo toàn năng lượng.

10. Tích phân Gauss trong lý thuyết xác suất:

    $${\int }_{-\infty }^{\infty }{e}^{-x^2}dx=\sqrt{\pi }$$

    Đây là một tích phân nổi tiếng, liên quan đến phân bố chuẩn trong lý thuyết xác suất.

2. Lập trình

Dưới đây là ví dụ về cách cộng hai số và in kết quả ra màn hình bằng 10 ngôn ngữ lập trình khác nhau:

1. Python:

   a = 5
   b = 3
   result = a + b
   print("Sum:", result)
   

2. Java:

   public class Main {
       public static void main(String[] args) {
           int a = 5;
           int b = 3;
           int result = a + b;
           System.out.println("Sum: " + result);
       }
   }
   

3. C++:

   #include <iostream>
   using namespace std;
   
   int main() {
       int a = 5;
       int b = 3;
       int result = a + b;
       cout << "Sum: " << result << endl;
       return 0;
   }
   

4. JavaScript:

   let a = 5;
   let b = 3;
   let result = a + b;
   console.log("Sum:", result);
   

5. C#:

   using System;
   
   class Program {
       static void Main() {
           int a = 5;
           int b = 3;
           int result = a + b;
           Console.WriteLine("Sum: " + result);
       }
   }
   

6. Ruby:

   a = 5
   b = 3
   result = a + b
   puts "Sum: #{result}"
   

7. Go:

   package main
   
   import "fmt"
   
   func main() {
       a := 5
       b := 3
       result := a + b
       fmt.Println("Sum:", result)
   }
   

8. PHP:

   <?php
   $a = 5;
   $b = 3;
   $result = $a + $b;
   echo "Sum: " . $result;
   ?>
   

9. Swift:

   let a = 5
   let b = 3
   let result = a + b
   print("Sum: \(result)")
   

10. Rust:

    fn main() {
        let a = 5;
        let b = 3;
        let result = a + b;
        println!("Sum: {}", result);
    }
    rust

11. Bash

#!/bin/bash
# Liệt kê các tệp trong thư mục hiện tại
for file in *; do
  # Kiểm tra xem đó có phải là tệp không
  if [ -f "$file" ]; then
    # Đếm số dòng trong tệp
    line_count=$(wc -l < "$file")
    # In ra tên tệp và số dòng
    echo "File: $file - Lines: $line_count"
  fi
done
bash

12. Dockerfile

# Stage 1: Build Stage
FROM node:alpine as build-stage

WORKDIR /app

# Copy necessary files and install dependencies
COPY package.json yarn.lock .yarnrc.yml ./
COPY .yarn/ ./.yarn
RUN yarn install

# Copy patches and source files, then build the project
COPY patches/ ./patches
COPY . ./
RUN yarn build

# Stage 2: Production Stage
FROM nginx:alpine as production-stage

# Copy built files from build stage and nginx configuration
COPY --from=build-stage /app/build /app
COPY nginx.conf /etc/nginx/nginx.conf

4. Mermaid Diagram

Dưới đây là 10 ví dụ về biểu đồ Mermaid khác nhau, từ biểu đồ luồng đến biểu đồ Gantt:

1. Biểu đồ luồng (Flowchart):

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Proceed]
    B -->|No| D[Fix it]
    D --> E[Re-check]
    E --> B

2. Biểu đồ trình tự (Sequence Diagram):

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B->>A: I am good, thanks!
    A->>B: What about the project?
    B->>A: It's on track.

3. Biểu đồ lớp (Class Diagram):

classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    class Dog {
        +void bark()
    }
    Animal <|-- Dog

4. Biểu đồ trạng thái (State Diagram):

stateDiagram
    [*] --> Idle
    Idle --> Active : Start button pressed
    Active --> Idle : Stop button pressed
    Active --> Error : Error encountered
    Error --> Idle : Reset button pressed

5. Biểu đồ Gantt (Gantt Chart):

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Task A      :a1, 2024-08-01, 10d
    Task B      :after a1  , 15d
    section Execution
    Task C      :2024-08-15  , 20d
    Task D      :2024-09-01  , 30d

6. Biểu đồ chuỗi cung ứng (Journey Diagram):

journey
    title User Journey
    section Order Process
      Order placed: 5: Alice, Bob
      Payment processed: 3: Alice
      Order shipped: 4: Bob
      Order delivered: 2: Alice, Bob

7. Biểu đồ sơ đồ tư duy (Mindmap):

mindmap
    root((Project))
      Phase 1
          Subtask 1
          Subtask 2
      Phase 2
          Subtask 3
          Subtask 4

8. Biểu đồ định tuyến (Entity Relationship Diagram):

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--|{ LINE-ITEM : "described by"

9. Biểu đồ hỗn hợp (Mixed Diagram):

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    B --> C(Round Rect)
    C --> D((Database))
    D --> E[[Hexagon]]

10. Biểu đồ đối tượng (Object Diagram):

classDiagram
    class Car {
        +String make
        +String model
        +int year
        +void start()
        +void drive()
    }
    Car --o Engine
    Car --o Wheel
    Engine : +int horsepower
    Wheel : +int size

11. UML User Case