Giao diện và Thao tác Điều hướng

Sức mạnh lớn nhất của Markdown Live Editor nằm ở khả năng dung hòa sự thanh lịch của một ứng dụng ghi chú hiện đại với tính chính xác, chặt chẽ của một môi trường phát triển (IDE). Bạn không bao giờ bị khóa chặt vào một góc nhìn duy nhất mà có thể linh hoạt chuyển đổi theo từng tác vụ.

1. Kiến trúc Giao diện Kép (Live Preview & Source Mode)

Tùy thuộc vào nhu cầu làm việc, bạn có thể chuyển đổi mượt mà giữa hai chế độ soạn thảo:

• Live Editor (Trực quan): Xây dựng trên nền tảng Milkdown¹, đây là chế độ xem và soạn thảo Markdown trực quan (WYSIWYG). Mọi cú pháp tiêu đề, in đậm, bảng biểu, công thức KaTeX hay sơ đồ Mermaid đều được hiển thị định dạng ngay lập tức.
  • Phù hợp khi: Đọc và biên tập tài liệu dài, rà soát nội dung AI tạo ra, tập trung vào câu chữ thay vì ký hiệu Markdown, kiểm tra bố cục trực quan, hoặc chọn đoạn văn bản để gửi ngữ cảnh sang AI.
• Source Mode (Mã nguồn): Sử dụng CodeMirror 6², cung cấp trải nghiệm highlight cú pháp chuẩn mực, quen thuộc với lập trình viên.
  • Phù hợp khi: Chỉnh sửa YAML Frontmatter ở đầu file, kiểm tra ký tự thoát/khoảng trắng, xử lý khối HTML phức tạp, hoặc dán các khối Markdown lớn.

2. Thanh công cụ (Toolbar)

Thanh công cụ của Markdown Live Edito

Được hiển thị tối giản ở phía trên cùng của giao diện, thanh công cụ giúp bạn truy cập nhanh tất cả các định dạng và tính năng mở rộng một cách trực quan:

• Lịch sử chỉnh sửa:
  • Menu Hoàn tác & Làm lại (Chứa tính năng Undo và Redo)
• Cấu trúc tài liệu (Headings):
  • ¶ Paragraph Dropdown Heading: Chuyển đổi linh hoạt giữa văn bản thường (Paragraph) và các cấp độ thẻ tiêu đề từ H1 đến H6.
• Định dạng văn bản cơ bản:
  • In đậm (Bold)
  • In nghiêng (Italic)
  • Gạch ngang (Strikethrough)
  • Trích dẫn (Blockquote)
  • Chú thích / Chỉ số trên (Footnote / Superscript)
• Mã nguồn:
  • Mã nguồn nội tuyến / Khối mã nguồn (Inline Code / Code block)
• Danh sách (Lists):
  • Menu Danh sách: Trình đơn thả xuống để chèn danh sách không thứ tự (Bullet), danh sách có thứ tự (Ordered), và danh sách công việc (Task list).
• Chèn Liên kết & Đa phương tiện:
  • Liên kết thường (Link)
  • Liên kết nội bộ Obsidian (Wikilink [[]])
  • Chèn Hình ảnh (Image)
  • Chèn Bảng biểu (Table)
  • Chèn Mục lục (Table of Contents)
• Hộp thông báo:
  • Menu Admonition: Trình đơn thả xuống để chèn các khối cảnh báo (Note, Tip, Important, Warning, Caution).
• Tiện ích & Xuất bản:
  • Tìm kiếm & Thay thế (Find & Replace)
  • Xuất file PDF (Export PDF)
  • Sao chép Rich Text kèm định dạng (Copy HTML Clipboard)
• Điều khiển giao diện:
  • Menu Thu/Phóng (Zoom In / Zoom Out)
  • Bật/Tắt chế độ Mã nguồn (Toggle Source Mode)
  • Mở bằng VS Code Text Editor (Plain Text Editor)

3. Câu lệnh nhanh / (Slash Commands)

Lấy cảm hứng từ Obsidian và Notion, bạn chỉ cần gõ dấu / khi soạn thảo, một menu lệnh sẽ xuất hiện. Không cần rời tay khỏi bàn phím, bạn có thể dùng các phím ↓, ↑ và Enter để chọn chèn nhanh các định dạng phổ biến:

• Tiêu đề (H1 - H3)
• Danh sách (Bullet, Ordered, Task List)
• Thành phần phức tạp: Blockquote, Code Block, Table, Image
• Cấu trúc đặc thù: YAML Frontmatter, Footnote

4. Tìm kiếm & Thay thế

Nhấn phím tắt Ctrl + F (hoặc Cmd + F trên macOS) hoặc nhấp biểu tượng kính lúp trên Toolbar để mở thanh tìm kiếm nội tuyến:

• Tìm kiếm toàn diện: Quét và làm nổi bật tất cả kết quả khớp trong tài liệu.
• Điều hướng nhanh: Nhảy tới kết quả trước/sau tức thì.
• Bộ lọc chính xác: Hỗ trợ phân biệt chữ hoa/chữ thường (Match Case).
• Thay thế linh hoạt: Thay thế từng vị trí hoặc Thay thế tất cả (Replace All) mà không cần chuyển sang chế độ mã nguồn.

5. Mục lục nội dung (TOC)

Mục lục nổi thông minh tự động theo dõi cấu trúc các thẻ tiêu đề H1–H4:

• Nhấp vào từng mục tiêu đề để cuộn mượt mà đến phần tương ứng.
• Tự động thu gọn khi không sử dụng để giải phóng không gian soạn thảo, hoặc ghim cố định khi làm việc với tài liệu dài.

6. Phím tắt (Shortcuts)

Các phím tắt được thiết kế tinh tế giúp duy trì tốc độ gõ phím. Hệ thống tự động phân biệt giữa hệ điều hành Windows/Linux và macOS:

7. Tùy biến Cấu hình (Settings)

Mở cài đặt tiện ích mở rộng Markdown Live Editor từ Extensions

Extension cung cấp các thiết lập tại User / Workspace Settings (nhấn phím tắt Cmd + , trên macOS hoặc Ctrl + , trên Windows/Linux và tìm kiếm từ khóa Markdown Live), cho phép bạn tinh chỉnh môi trường làm việc theo đúng nhu cầu:

Giao diện tùy chỉnh cấu hình Markdown Live Editor trong Settings

Cấu hình chung (General)

• Language (markdownLive.language):

  • Mô tả: Lựa chọn ngôn ngữ giao diện hiển thị cho Markdown Live Editor (menu ngữ cảnh, thanh công cụ, thông báo trạng thái).
  • Giá trị nhận:
    • en (Mặc định): Tiếng Anh.
    • vi: Tiếng Việt.

• Table Display Mode (markdownLive.tableDisplayMode):

  • Mô tả: Chế độ hiển thị bảng biểu trong trình soạn thảo trực quan.
  • Giá trị nhận:
    • scroll (Mặc định): Bật thanh cuộn ngang khi bảng có nhiều cột hoặc dữ liệu dài, giúp bảo toàn cấu trúc cột mà không làm vỡ bố cục.
    • wrap: Tự động ngắt chữ xuống dòng trong các ô dữ liệu để toàn bộ bảng luôn hiển thị vừa vặn trong khung nhìn.

Trình soạn thảo & Giao diện (Editor & UI)

• Font Family (markdownLive.fontFamily):

  • Mô tả: Bộ phông chữ hiển thị trong chế độ soạn thảo trực quan (WYSIWYG).
  • Giá trị nhận:
    • sans-serif (Mặc định): Phông chữ không chân hiện đại, thanh thoát và dễ đọc.
    • serif: Phông chữ có chân phong cách báo chí truyền thống, mang lại trải nghiệm đọc viết trang nhã (tương tự Medium hoặc Substack).

• Enable Slash Command (markdownLive.enableSlashCommand):

  • Mô tả: Bật hoặc tắt menu gợi ý lệnh nhanh khi gõ ký tự gạch chéo / trong trình soạn thảo.
  • Giá trị nhận:
    • true (Mặc định): Hiển thị menu gợi ý để chèn nhanh tiêu đề, danh sách, khối mã nguồn, hình ảnh hoặc bảng.
    • false: Tắt menu Slash command nếu bạn muốn gõ ký tự / tự do mà không làm xuất hiện popup.

Không gian làm việc & Quản lý ghi chú (Workspace & Notes)

• Default Note Directory (markdownLive.defaultNoteDirectory):

  • Mô tả: Thư mục mặc định để lưu trữ ghi chú mới khi bạn nhấn biểu tượng New Note trên thanh bên (Sidebar). Khuyến nghị cấu hình trong Workspace Settings.
  • Giá trị nhận: chuỗi ký tự (Đường dẫn tương đối từ thư mục gốc của workspace, ví dụ: notes/journal hoặc content/docs). Mặc định để trống "" (sẽ tạo ghi chú mới ngay tại thư mục gốc workspace).

• Sidebar Scan Directory (markdownLive.sidebarScanDirectory):

  • Mô tả: Thư mục chỉ định để thanh bên Markdown Live quét và hiển thị danh sách tài liệu. Giúp tối ưu hiệu năng và giữ thanh bên gọn gàng trong các dự án lớn, monorepo hoặc website có cấu trúc thư mục phức tạp. Khuyến nghị cấu hình trong Workspace Settings.
  • Giá trị nhận: chuỗi ký tự (Ví dụ: content/docs hoặc notes). Mặc định để trống "" (quét toàn bộ workspace).

• Template Folder (markdownLive.templateFolder):

  • Mô tả: Thư mục lưu trữ các file mẫu tài liệu Markdown (.md) dùng để chèn nhanh mẫu vào bài viết hiện tại hoặc tạo ghi chú mới từ template. Khuyến nghị cấu hình trong Workspace Settings.
  • Giá trị nhận: chuỗi ký tự (Đường dẫn tương đối từ thư mục gốc, ví dụ: templates hoặc .vscode/templates). Mặc định để trống "" (tắt tính năng template).

• Enable Graph View (markdownLive.enableGraphView):

  • Mô tả: Bật hoặc tắt tính năng hiển thị Biểu đồ liên kết cục bộ (Local Graph View) trong thanh bên để theo dõi các liên kết hai chiều (Backlinks / Outlinks).
  • Giá trị nhận:
    • true (Mặc định): Kích hoạt biểu đồ liên kết cục bộ.
    • false: Tắt biểu đồ liên kết cục bộ.

• Graph Depth (markdownLive.graphDepth):

  • Mô tả: Độ sâu quét liên kết mặc định hiển thị trên biểu đồ Local Graph (xác định số cấp bậc láng giềng liên kết mở rộng từ tài liệu hiện tại).
  • Giá trị nhận: số nguyên từ 1 đến 10 (Mặc định: 2).

Quản lý Hình ảnh (Images)

• Image Directory (markdownLive.imageDirectory):

  • Mô tả: Thư mục tự động lưu trữ file ảnh khi bạn dán (paste) trực tiếp từ clipboard vào tài liệu Markdown. Khuyến nghị cấu hình trong Workspace Settings.
  • Giá trị nhận: chuỗi ký tự (Đường dẫn tương đối từ thư mục gốc, ví dụ: assets/images hoặc public/images). Mặc định: assets/images.

• Image Public Path (markdownLive.imagePublicPath):

  • Mô tả: Tiền tố thư mục áp dụng cho các đường dẫn ảnh tuyệt đối (bắt đầu bằng /) trong Markdown để trình soạn thảo hiển thị đúng ảnh cục bộ trong chế độ xem trước trực tiếp. Ví dụ: trong các framework web như Next.js hay Docusaurus, ảnh được viết dạng ![Ảnh](/images/banner.png) nhưng file vật lý lưu tại public/images/banner.png, bạn điền public (hoặc /public) vào thiết lập này.
  • Giá trị nhận: chuỗi ký tự (Ví dụ: public hoặc static). Mặc định để trống "" (phân giải trực tiếp từ thư mục gốc workspace).

In ấn & Xuất bản PDF (Printing & Export)

• Print Header Format (markdownLive.printHeaderFormat):

  • Mô tả: Định dạng nội dung tiêu đề đầu trang (Header) khi in hoặc xuất tài liệu ra file PDF.
  • Giá trị nhận: chuỗi ký tự, hỗ trợ các biến YAML Frontmatter như {title}, {author}, {date}. Mặc định: "{title}".

• Print Footer Format (markdownLive.printFooterFormat):

  • Mô tả: Định dạng nội dung chân trang (Footer) khi in hoặc xuất tài liệu ra file PDF.
  • Giá trị nhận: chuỗi ký tự, hỗ trợ các biến YAML Frontmatter như {signature}, {website}. Mặc định: "{signature}".

• Print Page Number Format (markdownLive.printPageNumberFormat):

  • Mô tả: Định dạng hiển thị số trang khi in hoặc xuất tài liệu ra file PDF.
  • Giá trị nhận: chuỗi ký tự, sử dụng biến {page} để hiển thị số trang hiện tại (ví dụ: Trang {page} hoặc Page {page}). Mặc định: "{page}". Để trống "" nếu muốn tắt đánh số trang.

• Print Font Family (markdownLive.printFontFamily):

  • Mô tả: Bộ phông chữ tùy chỉnh áp dụng riêng khi in hoặc xuất bản tài liệu sang file PDF.
  • Giá trị nhận: chuỗi tên font (Ví dụ: 'Times New Roman, serif' hoặc 'Arial, sans-serif'). Mặc định để trống "" (sử dụng phông chữ mặc định của trình soạn thảo).

• Print Auto TOC (markdownLive.printAutoTOC):

  • Mô tả: Tự động tạo và chèn Mục lục (Table of Contents) ở đầu tài liệu khi in hoặc xuất file PDF.
  • Giá trị nhận:
    • true: Tự động chèn mục lục vào bản in/file PDF.
    • false (Mặc định): Không tự động chèn mục lục.

Tiếp theo: Cú pháp Markdown, Mermaid và LaTeX được hỗ trợ.