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

Chào mừng bạn đến với Obsidian-style Markdown Editor – một giải pháp đột phá biến VS Code thành một môi trường soạn thảo Markdown thực thụ, mang đậm triết lý và trải nghiệm mượt mà của Obsidian.

Ảnh chụp giao diện sử dụng của extension trên vscode.dev

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

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

Markdown không còn đơn thuần là việc gõ thủ công từng dòng chữ từ một trang giấy trắng. Trong môi trường làm việc Agent-first hiện nay, tài liệu đóng vai trò là "ngôn ngữ giao tiếp" chính giữa bạn và AI.

Toàn bộ quy trình làm việc giờ đây là một vòng lặp tương tác liên tục:

1. Bạn khởi tạo một file README.md để phác thảo bối cảnh dự án, các yêu cầu cốt lõi hoặc các cột mốc (milestones) quan trọng.
2. Bạn nhờ AI phát triển các ý tưởng đó thành tài liệu chi tiết (với bảng biểu, sơ đồ kiến trúc, hay các khối mã).
3. Bạn đọc lại, đánh giá và tự tay chỉnh sửa những điểm AI tạo ra chưa chuẩn xác.
4. Bạn chọn một đoạn văn bản cụ thể, đưa nhanh vào ngữ cảnh trò chuyện (chat context) để giao nhiệm vụ tiếp theo cho Agent.

Vấn đề là, các trình soạn thảo code truyền thống không hề được tối ưu cho quy trình này:

• Trải nghiệm đánh giá bị gián đoạn: Khi AI trả về các khối Markdown kỹ thuật phức tạp (như toán học LaTeX hay biểu đồ Mermaid), việc phải đọc chúng dưới dạng mã thô khiến bạn rất khó thẩm định nhanh tài liệu để đưa ra quyết định tiếp theo.
• Ngữ cảnh bị chia cắt: Bạn luôn phải mở một màn hình chia đôi (split preview) – một bên là mã nguồn thô ráp, một bên là kết quả hiển thị, vừa phân tâm lại vừa tốn diện tích màn hình.
• Rào cản công cụ: Việc phải luân chuyển giữa VS Code và một ứng dụng chuyên dụng (như Obsidian) chỉ để có được trải nghiệm đọc/viết tử tế làm đứt gãy hoàn toàn luồng suy nghĩ của bạn.

Giải pháp từ Obsidian-style Markdown Editor

Obsidian-style Markdown Editor ra đời để giải quyết triệt để những vấn đề trên. Tiện ích này mang đến trải nghiệm WYSIWYG (What You See Is What You Get) thực thụ ngay bên trong VS Code:

• Chỉnh sửa trực tiếp: Viết và chỉnh sửa trực tiếp trên giao diện đã được định dạng (live document) mà không cần màn hình preview.
• Hiển thị trực quan: Hỗ trợ render ngay lập tức LaTeX, Mermaid, đoạn mã (Code blocks), bảng biểu và HTML.
• Đồng bộ mã nguồn: Dễ dàng chuyển đổi sang chế độ CodeMirror 6 khi cần can thiệp sâu vào cú pháp, với vị trí cuộn trang được đồng bộ hoàn hảo giữa hai chế độ.
• Hoạt động mọi nơi: Kiến trúc web-first cho phép tiện ích hoạt động mượt mà trên VS Code desktop, remote workspaces, và cả môi trường trình duyệt (vscode.dev).

2. Tính tương thích hoàn hảo với Obsidian

Chúng tôi hiểu rằng Obsidian đã định hình một tiêu chuẩn tuyệt vời cho việc soạn thảo ghi chú và quản lý kiến thức. Vì vậy, Obsidian-style Markdown Editor được thiết kế để kế thừa và tương thích sâu sắc với những đặc trưng cốt lõi của Obsidian:

• Triết lý "File của bạn là của bạn": Mọi tài liệu đều được lưu trữ dưới dạng file .md cục bộ. Không có định dạng độc quyền, không có cơ sở dữ liệu khép kín. Bạn hoàn toàn làm chủ hệ thống dữ liệu của mình.
• Khái niệm Vault linh hoạt: Bất kỳ thư mục hoặc workspace nào trong VS Code cũng có thể ngay lập tức trở thành một "Vault" chứa ghi chú, được quản lý thông qua thanh Sidebar chuyên biệt, không cần các bước khởi tạo phức tạp.
• Wikilinks & Kết nối: Hỗ trợ cú pháp liên kết hai ngoặc vuông [[Tên bài viết]] và nhúng file ![[Tài liệu]]. Hệ thống tự động phân tích (indexing) toàn bộ workspace vào file .vscode/markdown-live-index.json để cung cấp khả năng tìm kiếm và điều hướng tốc độ cao.
• Biểu đồ tri thức (Graph View): Trực quan hóa các mối liên kết giữa các file bằng Local Graph và Global Graph tương tự như Obsidian, giúp bạn dễ dàng khám phá mạng lưới thông tin trong dự án.
• Frontmatter & Templates: Quản lý siêu dữ liệu (metadata) dễ dàng qua giao diện trực quan với YAML Frontmatter. Hỗ trợ tạo và chèn các Templates (với các biến như <% tp.file.title %>), giúp tối ưu hóa quy trình soạn thảo.

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

Việc cài đặt vô cùng đơn giản và nhanh chóng:

1. Mở Antigravity IDE hoặc VS Code.
2. Truy cập vào mục Extensions (Phím tắt: Ctrl+Shift+X hoặc Cmd+Shift+X trên macOS).
3. Tìm kiếm từ khóa: Obsidian-style Markdown Editor.
4. Chọn tiện ích từ nhà phát triển vnstock và nhấn Install.
5. (Tùy chọn) Tìm kiếm Obsidian-style trong phần Settings của VS Code để tinh chỉnh ngôn ngữ giao diện (hỗ trợ Tiếng Việt vi), phông chữ, thư mục lưu ảnh mặc định, và cấu hình Graph View theo sở thích.

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

Sau khi cài đặt, bạn có nhiều cách để đắm chìm vào không gian viết lách chuyên nghiệp này.

Các cách mở Live Editor

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

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

Mở Command Palette (Cmd+Shift+P hoặc Ctrl+Shift+P) và gõ Markdown Live để gọi nhanh các lệnh:

• Markdown Live: Toggle Graph View: Ẩn/hiện biểu đồ liên kết cục bộ (Local Graph) cho file hiện tại.
• Markdown Live: Show Global Graph: Mở biểu đồ liên kết toàn cục (Global Graph) cực kỳ hoành tráng cho toàn bộ workspace.
• Markdown Live: Insert Template: Chèn nhanh một template Markdown đã thiết lập sẵn vào vị trí con trỏ.
• Markdown Live: Re-index Vault: Quét lại toàn bộ các liên kết trong workspace, đảm bảo cơ sở dữ liệu liên kết luôn được cập nhật.
• Markdown Live: Send to AI Agent Context: Gửi đoạn văn bản đang bôi đen vào khung chat của AI Agent để tinh chỉnh hoặc phân tích sâu hơn.

---

Obsidian-style Markdown Editor không chỉ là một công cụ tiện lợi, nó là một nỗ lực nâng tầm trải nghiệm viết – nơi sự tự do của Markdown hòa quyện cùng sức mạnh của một trình soạn thảo tri thức hiện đại ngay tại nơi bạn code.