Kiểm tra kiểu Vditor

HowieHz
2024-03-05
Sử dụng để kiểm tra
🌍 Tiếng Trung giản thể
289

Vditor là một trình soạn thảo WYSIWYG hỗ trợ Markdown.

Nếu không quen với Markdown, bạn có thể sử dụng thanh công cụ hoặc phím tắt để định dạng.
Nếu đã quen thuộc với Markdown, bạn có thể trực tiếp định dạng văn bản hoặc chuyển sang chế độ xem chia màn hình.

Để biết thêm chi tiết và cách sử dụng, vui lòng tham khảo Vditor - Trình soạn thảo Markdown trên trình duyệt. Chúng tôi cũng rất hoan nghênh các góp ý hoặc báo cáo vấn đề từ bạn, cảm ơn ❤️.

Đây là một ví dụ về cách sử dụng đúng Markdown để tạo ra định dạng rõ ràng cho bài viết của bạn. Việc học cách này là rất cần thiết để bài viết của bạn trở nên gọn gàng hơn.

Trích dẫn: Markdown là cú pháp định dạng văn bản được lấy cảm hứng từ…

Hướng dẫn cú pháp

Nội dung thông thường

Phần này minh họa một số định dạng trong nội dung, chẳng hạn như:

In đậm - **In đậm**
Nghiêng - _Nghiêng_
~~Gạch ngang~~ - ~~Gạch ngang~~
Nhãn mã - Nhãn mã
Liên kết siêu văn bản
username@gmail.com - username@gmail.com

Đề cập người dùng

@Vanessa Sử dụng @User để đề cập đến người dùng trong nội dung. Người dùng được đề cập sẽ nhận được thông báo hệ thống.

GHI CHÚ:

Sau @tênngườidùng phải có một dấu cách.

Người mới không có quyền sử dụng tính năng này.

Biểu tượng Emoji

Hỗ trợ hầu hết các biểu tượng chuẩn. Bạn có thể nhập trực tiếp bằng bộ gõ hoặc nhập tay theo định dạng ký tự. Nhập : để kích hoạt hoàn thành tự động và tùy chỉnh biểu tượng thường dùng trong cài đặt cá nhân.

Một số ví dụ biểu tượng

😄 😆 😵 😭 😰 😅 😢 😤 😍 😌 👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢

Tiêu đề lớn - Heading 3

Bạn có thể chọn sử dụng H1 đến H6, bắt đầu bằng ##(N). Khuyến nghị sử dụng Heading 3 làm tiêu đề cấp cao nhất trong bài viết hoặc bình luận, không sử dụng 1 hoặc 2 vì chúng dành riêng cho hệ thống trang web và tiêu đề bài viết.

GHI CHÚ: Đừng quên dấu cách sau #!

Heading 4

Heading 5

Heading 6

Hình ảnh

1
2
3


!alt text  
!alt text  
Sao chép  

Hỗ trợ sao chép và dán trực tiếp để tải lên.

Khối mã

Thông thường

1
2
3
4


*emphasize*  **strong**  
_emphasize_  __strong__  
var a = 1  
Sao chép  

Hỗ trợ tô sáng cú pháp

Nếu điền tên ngôn ngữ sau ``` thì sẽ có hiệu ứng tô sáng cú pháp, ví dụ:

Minh họa tô sáng Go

1
2
3
4
5
6


package main  
import "fmt"  
func main() {  
	fmt.Println("Hello, thế giới")  
}  
Sao chép  

Minh họa tô sáng Java

1
2
3
4
5
6


public class HelloWorld {  
  public static void main(String[] args) {  
    System.out.println("Hello World!");  
  }  
}  
Sao chép  

LƯU Ý: Các ngôn ngữ được hỗ trợ bao gồm ruby, python, js, html, erb, css, coffee, bash, json, yml, xml…

Danh sách có thứ tự, không thứ tự, danh sách nhiệm vụ

Danh sách không thứ tự

Java
- Spring
  - IoC
  - AOP
Go
- gofmt
- Wide
Node.js
- Koa
- Express

Danh sách có thứ tự

Node.js
1. Express
2. Koa
3. Sails
Go
1. gofmt
2. Wide
Java
1. Latke
2. IDEA

Danh sách nhiệm vụ

Phát hành Sym
Phát hành Solo
Đặt lịch hẹn nha sĩ

Bảng

Nếu cần hiển thị dữ liệu, bạn có thể sử dụng bảng.

header 1	header 2
cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Chi tiết ẩn

Đây là phần tóm tắt. Đây là phần chi tiết.

Đoạn văn

Dòng trống có thể phân chia nội dung thành đoạn để dễ đọc hơn. (Đây là đoạn văn thứ nhất)
Việc sử dụng dòng trống trong việc định dạng Markdown rất quan trọng. (Đây là đoạn văn thứ hai)

1
2
3


[
[
Sao chép  

Công thức toán học

Công thức nhiều dòng:
\frac{1}{ \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { 1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}}{1+\cdots}} } }
Công thức trong dòng:
Công thức a^2 + b^2 = \color{red}c^2 nằm trong dòng.

Bản đồ tư duy

Giáo trình - Hướng dẫn cú pháp - Nội dung thông thường - Đề cập người dùng - Biểu tượng Emoji - Một số ví dụ biểu tượng - Tiêu đề lớn - Heading 3 - Heading 4 - Heading 5 - Heading 6 - Hình ảnh - Khối mã - Thông thường - Hỗ trợ tô sáng cú pháp - Minh họa tô sáng Go - Minh họa tô sáng Java - Danh sách có thứ tự, không thứ tự, danh sách nhiệm vụ - Danh sách không thứ tự - Danh sách có thứ tự - Danh sách nhiệm vụ - Bảng - Chi tiết ẩn - Đoạn văn - Liên kết trích dẫn - Công thức toán học - Bản đồ tư duy - Biểu đồ quy trình - Biểu đồ thời gian - Biểu đồ Gantt - Biểu đồ - Phổ năm dây - Graphviz - Phương tiện đa phương tiện - Chú thích chân trang - Phím tắt

Biểu đồ quy trình

graph TB c1–>a2 subgraph one a1–>a2 end subgraph two b1–>b2 end subgraph three c1–>c2 end

Biểu đồ thời gian

sequenceDiagram Alice-»John: Hello John, how are you? loop Every minute John–»Alice: Great! end

Biểu đồ Gantt

gantt title Một biểu đồ Gantt dateFormat YYYY-MM-DD section Section A task :a1, 2019-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2019-01-12 , 12d another task : 24d

Biểu đồ

{ “title”: { “text”: “Gần đây 30 ngày” }, “tooltip”: { “trigger”: “axis”, “axisPointer”: { “lineStyle”: { “width”: 0 } } }, “legend”: { “data”: [“Bài viết”, “Người dùng”, “Bình luận”] }, “xAxis”: [{ “type”: “category”, “boundaryGap”: false, “data”: […] }] }

Phổ năm dây

Graphviz

digraph finite_state_machine { rankdir=LR; size=“8,5” node [shape = doublecircle]; S; node [shape = point ]; qi node [shape = circle]; qi -> S; S -> q1 [ label = “a” ]; S -> S [ label = “a” ]; q1 -> S [ label = “a” ]; q1 -> q2 [ label = “ddb” ]; q2 -> q1 [ label = “b” ]; q2 -> q2 [ label = “b” ]; }

Biểu đồ quy trình

st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op

Phương tiện đa phương tiện

Hỗ trợ v.qq.com, youtube.com, youku.com, coub.com, facebook.com/video, dailymotion.com, .mp4, .m4v, .ogg, .ogv, .webm, .mp3, .wav

V

Chú thích chân trang

Đây là một chú thích chân trang2, đây là một chú thích khác.

1
2
3
4
5


Đây là một chú thích chân trang[^1], đây là một chú thích khác[^bignote].  
[^1]: Định nghĩa chú thích đầu tiên.  
[^bignote]: Định nghĩa chú thích có thể sử dụng nhiều đoạn nội dung.  
  Đoạn văn thụt lề được đưa vào trong định nghĩa chú thích này.  
  

Có thể sử dụng khối mã.

1
2
3



Cũng có các cú pháp định dạng hàng cấp khác như **in đậm** và...
Sao chép  

Phím tắt

Trình soạn thảo của chúng tôi hỗ trợ nhiều phím tắt, xem chi tiết tại Phím tắt bàn phím (hoặc nhấn “?”).

Về Mermaid

Mermaid là một công cụ vẽ biểu đồ dựa trên JavaScript, thông qua việc phân tích cú pháp tương tự Markdown để tạo và sửa đổi biểu đồ động. Mục đích chính của Mermaid là đảm bảo tài liệu luôn được cập nhật kịp thời trong quá trình phát triển.

Doc-Rot là một vấn đề mà Mermaid hướng đến giải quyết.
Việc vẽ biểu đồ và viết tài liệu chiếm mất thời gian quý báu của nhà phát triển, và khi nghiệp vụ thay đổi, chúng nhanh chóng trở nên lỗi thời. Nhưng nếu thiếu biểu đồ hoặc tài liệu, điều đó sẽ gây cản trở lớn đến năng suất và việc học hỏi của thành viên mới. Mermaid giải quyết vấn đề này bằng cách cho phép người dùng tạo ra những biểu đồ dễ dàng sửa đổi, thậm chí có thể tích hợp vào kịch bản sản xuất (hoặc mã nguồn khác). Ngay cả những người không phải lập trình viên cũng có thể tạo ra biểu đồ chi tiết nhờ Mermaid Live Editor. Bạn có thể truy cập Giáo trình để xem video hướng dẫn Live Editor hoặc kiểm tra danh sách tích hợp và sử dụng Mermaid để xem công cụ tài liệu của bạn có hỗ trợ Mermaid hay chưa.

Nếu muốn tìm hiểu thêm về Mermaid và cách sử dụng cơ bản, bạn có thể tham khảo Hướng dẫn khởi đầu, Cách sử dụng và Giáo trình.

Ví dụ

Dưới đây là một số ví dụ về biểu đồ có thể tạo bằng Mermaid. Nhấp vào cú pháp để xem chi tiết.

Biểu đồ quy trình [Tài liệu - live editor]

1
2
3
4
5
6


flowchart LR  
A[Hard] -->|Text| B(Round)  
B --> C{Decision}  
C -->|One| D[Result 1]  
C -->|Two| E[Result 2]  
Sao chép  

flowchart LR A[Hard] –>|Text| B(Round) B –> C{Decision} C –>|One| D[Result 1] C –>|Two| E[Result 2]

… (tiếp tục với các phần còn lại)…