Vnstock Logo

Giới thiệu & Cài đặt

Chung

Mục lục

Obsidian-style Markdown Editor: Trải nghiệm viết liền mạch ngay trong VS Code

Obsidian-style Markdown Editor (hay Markdown Live Editor) biến VS Code thành môi trường soạn thảo Markdown trực quan WYSIWYG1, mang trải nghiệm ghi chú và quản lý tri thức của Obsidian vào Visual Studio Code và Antigravity IDE.

Giao diện làm việc của Markdown Live EditorGiao diện làm việc của Markdown Live Editor

Vấn đề và Giải pháp

Nỗi đau của người dùng Markdown trong kỷ nguyên Agent-first

Trong kỷ nguyên làm việc theo mô hình Agent-first2, Markdown không chỉ là văn bản thô mà còn là phương tiện giao tiếp chính giữa lập trình viên và AI.

Quy trình phát triển phần mềm hiện đại là một vòng lặp tương tác liên tục:

  1. Bạn tạo file README.md hoặc plan.md để phác thảo bối cảnh và yêu cầu cốt lõi.
  2. AI phát triển ý tưởng thành tài liệu chi tiết kèm bảng dữ liệu, sơ đồ kiến trúc hoặc lưu đồ.
  3. Bạn đọc lại, rà soát và trực tiếp chỉnh sửa những điểm chưa chính xác.
  4. Bạn bôi đen đoạn văn bản cụ thể đưa vào ngữ cảnh trò chuyện để giao nhiệm vụ tiếp theo cho Agent.

Tuy nhiên, trình soạn thảo code truyền thống làm đứt gãy quy trình này:

  • Đọc tài liệu bị gián đoạn: Việc phải đọc các khối mã phức tạp như công thức LaTeX3 hay sơ đồ Mermaid4 dưới dạng mã thô khiến bạn mất thời gian hình dung cấu trúc thực tế.
  • Màn hình bị chia cắt: Chế độ chia đôi màn hình để xem trước mặc định vừa tốn diện tích hiển thị vừa gây phân tâm khi cuộn trang.
Xem ảnh giao diện chia đôi màn hình Giao diện chia đôi màn hình mặc định của Visual StGiao diện chia đôi màn hình mặc định của Visual St
  • Đứt gãy luồng suy nghĩ: Phải chuyển đổi qua lại giữa VS Code và ứng dụng ghi chú chuyên biệt như Obsidian làm chậm nhịp làm việc.

Giải pháp từ Markdown Live Editor

Tiện ích mang đến trải nghiệm soạn thảo trực quan mượt mà ngay trong VS Code:

  • Chỉnh sửa trực tiếp: Viết và sửa văn bản trực tiếp trên giao diện đã định dạng mà không cần mở cửa sổ xem trước phụ.
  • Hiển thị trực quan tức thì: Tự động hiển thị sơ đồ Mermaid, công thức LaTeX, khối mã nguồn, bảng biểu và định dạng văn bản rich text.
  • Đồng bộ hai chế độ: Dễ dàng chuyển sang chế độ mã nguồn CodeMirror 65 khi cần can thiệp cú pháp thô, vị trí con trỏ và cuộn trang luôn được đồng bộ chính xác.
  • Tương thích đa nền tảng: Hoạt động đồng nhất trên VS Code Desktop, Remote SSH Workspace và cả trình duyệt web vscode.dev.

Tính năng quản lý tri thức chuẩn Obsidian

Tiện ích mang trọn vẹn những công cụ quản lý tri thức mạnh mẽ của Obsidian vào không gian làm việc của bạn:

  • Không gian làm việc linh hoạt: Quản lý toàn bộ tài liệu trong workspace như một Vault6 tri thức thông qua thanh Sidebar chuyên biệt.
  • Wikilinks và liên kết hai chiều: Hỗ trợ cú pháp liên kết [[Tên bài viết]]7 và nhúng file ![[Tài liệu]], tự động đánh chỉ mục toàn bộ tài liệu để điều hướng và kết nối ngữ cảnh nhanh chóng.
  • Biểu đồ liên kết Graph View: Trực quan hóa cấu trúc và mối quan hệ giữa các tài liệu dự án qua Graph View8 ở cả cấp độ cục bộ lẫn toàn cục.
  • Hoạt động trọn vẹn trên Desktop và Web: Khác với nhiều tiện ích phụ thuộc môi trường máy tính cục bộ khiến tính năng quét file bị vô hiệu hóa trên trình duyệt, Markdown Live Editor tối ưu cơ chế lập chỉ mục để hoạt động mượt mà ngay trên vscode.dev. Khi cần đọc lại tài liệu, chỉnh sửa nhẹ hay xem biểu đồ mạng lưới trên web, mọi tính năng đều sẵn sàng mà không gặp rào cản tài nguyên.
  • Frontmatter và Templates: Chuẩn hóa siêu dữ liệu với YAML Frontmatter9 và tự động chèn các mẫu tài liệu đã định sẵn với biến linh hoạt như <% tp.file.title %>.

Hướng dẫn Cài đặt

Cách cài đặt tiện ích mở rộngCách cài đặt tiện ích mở rộng
  1. Mở Antigravity IDE hoặc VS Code.
  2. Mở mục Extensions bằng phím tắt Cmd+Shift+X (macOS) hoặc Ctrl+Shift+X (Windows/Linux).
  3. Tìm kiếm từ khóa: Obsidian-style Markdown Editor.
  4. Chọn Install.
  5. Mở cài đặt tiện ích mở rộng này như dưới đây
Mở cài đặt tiện ích mở rộng Markdown Live Editor từ ExtensionsMở cài đặt tiện ích mở rộng Markdown Live Editor từ Extensions

Cách khởi động và Lệnh Command Palette

Các cách mở Live Editor

  • Cách 1 - Phím tắt: Mở file .md bất kỳ và nhấn Cmd + Ctrl + Shift + M (macOS) hoặc Ctrl + Alt + Shift + M (Windows/Linux).
  • Cách 2 - Biểu tượng trên thanh tiêu đề: Khi mở file Markdown ở chế độ code thô, nhấn biểu tượng Markdown ở góc trên bên phải.
Mở Markdown Live Editor bằng biểu tượng trên thanh tiêu đề EditorMở Markdown Live Editor bằng biểu tượng trên thanh tiêu đề Editor
  • Cách 3 - Menu chuột phải: Trong thanh Explorer, nhấp chuột phải vào file .md và chọn "Open in Markdown Live Editor".
Mở Markdown Live Editor từ menu chuột phải trong ExplorerMở Markdown Live Editor từ menu chuột phải trong Explorer

Các lệnh Command Palette hữu ích

Danh sách lệnh Markdown Live Editor trong Command PaletteDanh sách lệnh Markdown Live Editor trong Command Palette

Nhấn Cmd+Shift+P (macOS) hoặc Ctrl+Shift+P (Windows/Linux) và gõ Markdown Live để gọi nhanh:

  • Markdown Live: Toggle Graph View: Bật hoặc tắt biểu đồ liên kết cục bộ cho file hiện tại.
  • Markdown Live: Show Global Graph: Mở biểu đồ liên kết toàn cục cho toàn bộ workspace.
  • Markdown Live: Insert Template: Chèn mẫu Markdown đã thiết lập sẵn vào vị trí con trỏ.
  • Markdown Live: Re-index Vault: Quét và cập nhật lại chỉ mục liên kết toàn bộ tài liệu trong workspace.
  • Markdown Live: Send to AI Agent Context: Gửi đoạn văn bản đang chọn vào khung chat của AI Agent để xử lý tiếp.

Tiếp theo: Rà soát Markdown cùng AI trong VS Code.

Footnotes

  1. WYSIWYG (What You See Is What You Get) là phương thức hiển thị nội dung trực quan giống kết quả xuất bản ngay trong lúc soạn thảo. ↩

  2. Agent-first là mô hình làm việc lấy các tác nhân AI làm trọng tâm trong việc hỗ trợ khởi tạo, xử lý và tự động hóa các tác vụ. ↩

  3. LaTeX là hệ thống soạn thảo chuyên dùng để biểu diễn các biểu thức toán học và tài liệu khoa học phức tạp. ↩

  4. Mermaid là công cụ vẽ biểu đồ và sơ đồ luồng tự động bằng cú pháp văn bản Markdown. ↩

  5. CodeMirror 6 là thư viện biên tập mã nguồn thế hệ mới trên nền web, tối ưu hiệu năng cao và hỗ trợ mở rộng linh hoạt. ↩

  6. Vault là thuật ngữ trong Obsidian dùng để chỉ thư mục gốc lưu trữ toàn bộ hệ thống tài liệu và ghi chú cá nhân. ↩

  7. Wikilink là cú pháp liên kết nội bộ dạng [[Tên tài liệu]], chuẩn mực kết nối thông tin trong các hệ thống quản lý tri thức cá nhân (PKM). ↩

  8. Graph View là tính năng biểu diễn trực quan mối quan hệ và các liên kết chéo giữa các bài viết dưới dạng đồ thị mạng lưới. ↩

  9. YAML Frontmatter là khối dữ liệu cấu hình đặt ở đầu file Markdown giữa hai cặp dấu ---, dùng để lưu thuộc tính bài viết như tiêu đề, ngày tạo hay thẻ phân loại. ↩

Thảo luận

Đang tải…