Vnstock Logo

Cú pháp Markdown, Mermaid và LaTeX được hỗ trợ

Chung

Mục lục

Khả năng render hoàn hảo các tài liệu kỹ thuật chính là nơi Markdown Live Editor tỏa sáng nhất. Kế thừa triết lý từ Obsidian và GitHub, tiện ích không chỉ dừng lại ở cú pháp Markdown cơ bản mà còn mở rộng hỗ trợ toàn diện các khối nội dung nâng cao như toán học LaTeX, sơ đồ Mermaid, khối lưu ý Admonitions, liên kết nội bộ Wikilink và hệ thống Template.

1. Cú pháp Markdown Chuẩn (GitHub Flavored Markdown)

Cú pháp markdown cơ bảnCú pháp markdown cơ bản

Tiện ích hỗ trợ đầy đủ các định dạng Markdown tiêu chuẩn phổ biến:

  • Tiêu đề phân cấp: Hỗ trợ từ H1 đến H6 (# đến ######).
  • Định dạng phông chữ: In đậm (**chữ đậm**), in nghiêng (*chữ nghiêng*), gạch ngang (~~gạch ngang~~).
  • Danh sách linh hoạt:
    • Danh sách không thứ tự (* hoặc -).
    • Danh sách có thứ tự (1., 2.).
    • Danh sách công việc Task list (- [ ] Chưa xong và - [x] Đã hoàn thành).
  • Khối trích dẫn (Blockquote): Bắt đầu bằng dấu >.
  • Mã nguồn: Mã trong dòng (Inline code `code`) và khối mã nguồn nhiều dòng (Code block ```) với tính năng tô màu cú pháp (Syntax Highlighting) chuyên nghiệp.
  • Đường phân cách nội dung: Sử dụng --- hoặc ***.

2. Bảng biểu Trực quan & Tùy biến Hiển thị

Bảng trong Markdown thuần thường tốn nhiều công sức căn chỉnh thủ công. Với Live Editor:

  • Chỉnh sửa trực quan qua chuột phải: Nhấp chuột phải vào bảng để Thêm hàng/cột, Xóa hàng/cột, hoặc Xóa bảng mà không cần căn thủ công từng dấu gạch đứng |.
Menu ngữ cảnh cho bảngMenu ngữ cảnh cho bảng
  • Tùy biến chế độ hiển thị: Cấu hình thông qua thiết lập markdownLive.tableDisplayMode:
Cài đặt chế độ hiển thị bảngCài đặt chế độ hiển thị bảng
  • scroll: Giữ nguyên cấu trúc dữ liệu theo cột và cho phép cuộn ngang (rất thích hợp cho bảng dữ liệu tài chính nhiều cột).
  • wrap: Tự động xuống dòng nội dung ô để bảng luôn vừa vặn với độ rộng màn hình.

3. Khối Lưu ý & Cảnh báo (Admonitions / Callouts)

Các dạng khối cảnh báo phổ biến được hỗ trọCác dạng khối cảnh báo phổ biến được hỗ trọ

Tạo điểm nhấn thị giác cho tài liệu bằng các khối cảnh báo và ghi chú theo chuẩn Obsidian / GitHub:

MD
> [!NOTE]
> Đây là khối ghi chú cung cấp thêm thông tin hữu ích cho người đọc.

> [!TIP]
> Mẹo nhỏ giúp tối ưu hóa thao tác khi soạn thảo.

> [!WARNING]
> Cảnh báo quan trọng cần kiểm tra kỹ trước khi tiếp tục.

Các loại Admonition được hỗ trợ đầy đủ kèm màu sắc và icon đặc trưng bao gồm:

  • Thông tin & Ghi chú: note, info (Thông tin chung hoặc bổ sung).
  • Mẹo & Hướng dẫn: tip (Mẹo và gợi ý hữu ích).
  • Quan trọng & Tóm tắt: important, abstract (Điểm quan trọng hoặc tóm tắt nội dung).
  • Cảnh báo & Rủi ro: warning, caution (Cảnh báo rủi ro hoặc lưu ý mức độ cao).
  • Trạng thái & Lỗi: success, done, error, bug, fail, danger (Báo cáo thành công, hoàn thành hoặc lỗi nghiêm trọng).
  • Khác: quote (Trích dẫn), example (Ví dụ minh họa), question, todo (Câu hỏi hoặc việc cần làm).

4. Công thức Toán học LaTeX (KaTeX)

Hiển thị công thức toán họcHiển thị công thức toán học

Được trợ lực bởi thư viện KaTeX hiệu năng cao, các công thức toán học đều được render sắc nét, chuẩn mực như trên tạp chí khoa học:

  • Công thức trong dòng (Inline): Bao bọc công thức bằng một cặp dấu $, ví dụ $E(R) = \sum p_i r_i$.
  • Công thức khối (Block): Tách thành khối độc lập bằng cặp dấu $$:
MD
$$
\sigma^2 = \sum_{i=1}^{n} p_i (r_i - E(R))^2
$$

Công thức được hiển thị trực tiếp ngay trong quá trình gõ, giúp bạn dễ dàng rà soát ký hiệu mà không phải đọc mã LaTeX thô.

5. Lưu đồ Mermaid

Phác thảo kiến trúc hệ thống, quy trình nghiệp vụ hoặc luồng dữ liệu trực tiếp bằng mã Mermaid ngay trong tài liệu mà không cần phần mềm vẽ sơ đồ rời:

MD
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

sẽ hiển thị

Lưu đồ Mermaid trong Markdown Live EditorLưu đồ Mermaid trong Markdown Live Editor

Tính năng tương tác trên sơ đồ Mermaid:

  • Thanh công cụ nổi: Phóng to (Zoom In), thu nhỏ (Zoom Out), đặt lại tỷ lệ (Reset) và xem toàn màn hình (Fullscreen).
  • Chỉnh sửa nhanh: Nhấp đúp vào sơ đồ trong Live Mode để mở khung chỉnh sửa mã Mermaid trực tiếp.
  • Tự động thích ứng theme: Màu sắc sơ đồ tự động đồng bộ theo giao diện Sáng / Tối (Light / Dark theme) của VS Code.

6. Thẻ HTML Tương tác

HTML viết xen trong Markdown được hiển thị an toàn và chuẩn xác ở chế độ trực quan, tiêu biểu là các khối đóng/mở nội dung <details> và <summary>:

HTML
<details>
<summary>Nhấp để xem giải thích chi tiết</summary>

Nội dung chi tiết được ẩn bên trong khối có thể đóng/mở tương tác trực tiếp ngay khi đang soạn thảo.
</details>

Khi cần kiểm soát chi tiết từng thuộc tính HTML phức tạp, bạn có thể chuyển sang Source Mode bằng phím tắt Alt + M (hoặc Opt + M trên macOS).

7. Chú thích cuối trang & Thẻ

  • Chú thích cuối trang (Footnotes): Giúp tài liệu học thuật và báo cáo nghiên cứu trở nên chuyên nghiệp:
MD
Nhận định này dựa trên phân tích dữ liệu thị trường năm 2024.[^1]

[^1]: Báo cáo phân tích định lượng dữ liệu chứng khoán Vnstock 2024.
  • Thẻ (Hashtags): Đặt các thẻ như #nghien-cuu, #kien-truc trong nội dung. Thẻ sẽ được nhận diện và hỗ trợ tìm kiếm, phân nhóm trong đồ thị liên kết Graph View.

8. Liên kết nội bộ & Nhúng Ghi chú

  • Liên kết nội bộ (Wikilink1): Cú pháp liên kết phong cách Obsidian giúp kết nối các tài liệu với nhau:
MD
[[tong-quan-kien-truc]]
[[tong-quan-kien-truc|Tài liệu Kiến trúc Hệ thống]]

Gõ [[ để mở danh sách gợi ý tự động tìm file trong không gian làm việc.

  • Nhúng toàn bộ nội dung file (Transclusion):
MD
![[gioi-thieu-chung]]

Tiện ích sẽ tự động đọc file được chỉ định, lược bỏ phần YAML Frontmatter ở đầu và nhúng trực tiếp nội dung vào vị trí đặt lệnh. File nguồn vẫn độc lập, rất tiện lợi khi tái sử dụng các đoạn văn mẫu, quy ước chung hoặc phần mở đầu.

9. Siêu dữ liệu YAML - thuộc tính YAML ghi chú

Phần siêu dữ liệu ở đầu file (được bao bọc bởi ---) được tách biệt thành bảng Properties hiện đại có thể thu gọn:

YAML
---
title: "Báo cáo Phân tích Kỹ thuật"
author: "Vnstock Team"
tags:
  - chung-khoan
  - phan-tich-dinh-luong
color: "#6c8cff"
---

Các thuộc tính này hỗ trợ quản lý dữ liệu bài viết, tự động hiển thị tiêu đề khi xuất bản in/PDF, và trường color sẽ định hình màu sắc điểm nút đại diện cho file trên Graph View.

10. Hệ thống mẫu ghi chú

Markdown Live Editor tích hợp sẵn hệ thống chèn mẫu tài liệu, tương thích ngược với các cú pháp phổ biến của Templater trong Obsidian:

Để sử dụng, hãy thiết lập thư mục chứa file mẫu trong cài đặt markdownLive.templateFolder (mặc định: .vscode/templates).

Các Placeholder thông dụng:

Cú phápÝ nghĩa & Hoạt động
<% tp.file.title %>Tự động lấy tên file hiện tại (không kèm đuôi .md), hữu ích khi tạo tiêu đề H1 tự động (# <% tp.file.title %>).
<% tp.date.now() %>Chèn ngày hiện tại theo định dạng chuẩn YYYY-MM-DD.
<% tp.date.now("format") %>Chèn ngày tháng theo định dạng tùy chỉnh. Hỗ trợ các token YYYY, MM, DD, HH, mm, ss. Ví dụ: <% tp.date.now("DD/MM/YYYY HH:mm") %>.
Chèn Template Nhanh
Nhấn Ctrl + Shift + E (hoặc Cmd + Shift + E trên macOS) để mở menu danh sách Template và chèn ngay vào vị trí con trỏ.

Tiếp theo: Liên kết nội bộ, liên kết ngược và đồ thị.

Footnotes

  1. Wikilink là cú pháp liên kết nội bộ dạng [[ten-ghi-chu]], chuẩn phổ biến trong Obsidian và các hệ thống quản lý tri thức Zettelkasten. ↩

Thảo luận

Đang tải…