Quản lý hình ảnh và mẫu Markdown trong VS Code

Hình ảnh và mẫu tài liệu thường tạo ra nhiều thao tác phụ khi viết Markdown: lưu file ở đâu, dùng đường dẫn nào, đổi tên có làm hỏng liên kết không và làm sao giữ cấu trúc tài liệu nhất quán. Markdown Live Editor xử lý các bước này trong thư mục làm việc hiện tại.

Dán hoặc kéo thả hình ảnh

Khi dán hoặc kéo một ảnh vào trình soạn thảo, tiện ích:

1. Đọc dữ liệu ảnh bằng API của trình duyệt.
2. Lưu file vào thư mục cấu hình bởi markdownLive.imageDirectory.
3. Tạo tên file dựa trên thời điểm lưu.
4. Chèn đường dẫn Markdown tương đối từ tài liệu hiện tại đến ảnh.

Thư mục mặc định là assets/images.

Ví dụ:

![Sơ đồ kiến trúc](../../assets/images/image-1788061200000.png)

Ảnh được lưu thành file riêng thay vì chuỗi base64¹ dài trong Markdown, vì vậy kho mã nguồn dễ rà soát và quản lý hơn.

Đổi tên và xoá ảnh từ trình soạn thảo

Mở trình đơn chuột phải trên một ảnh cục bộ để:

• Rename (Đổi tên): đổi tên file vật lý và cập nhật đường dẫn trong tài liệu hiện tại.
• Delete (Xoá): xác nhận rồi xoá file ảnh khỏi thư mục làm việc.

Tiện ích không áp dụng thao tác file cho ảnh nhúng bằng base64. Sau khi đổi tên ảnh được dùng ở nhiều tài liệu, nên tìm kiếm toàn bộ thư mục làm việc vì đường dẫn trong các file khác không nhất thiết được cập nhật tự động.

Kiểm tra tài nguyên khi xoá ghi chú

Khi xoá một file Markdown, tiện ích có thể rà các tài nguyên cục bộ được tham chiếu và cho phép chọn ảnh liên quan để chuyển vào thùng rác. Luôn kiểm tra xem ảnh có được ghi chú khác sử dụng không trước khi xác nhận.

Cấu hình đường dẫn ảnh cho Next.js và Vite

Website thường lưu file tại public/images/chart.png nhưng Markdown cần dùng địa chỉ /images/chart.png. Đặt:

{
  "markdownLive.imagePublicPath": "public"
}

Khi gặp:

![Biểu đồ](/images/chart.png)

Chế độ trực quan sẽ tìm file vật lý tại public/images/chart.png mà không sửa đường dẫn dùng khi website hiển thị.

Tính năng này phù hợp với Next.js, Vite và các dự án có thư mục public. imagePublicPath chỉ là phần đầu được thêm vào khi tìm file; hãy đặt giá trị tương ứng với cấu trúc thật của kho mã nguồn.

Duyệt ghi chú trong thanh bên Markdown Live

Sidebar cung cấp các tab:

• Recent Files (File gần đây): quay lại các tài liệu vừa mở.
• Vault Files (File ghi chú): duyệt các file Markdown trong phạm vi đã chọn.
• Annotations (Ghi chú): xem các đoạn đã đánh dấu và nhận xét khi rà soát.

Danh sách ghi chú có thể hiển thị đoạn xem trước và ảnh thu nhỏ, giúp nhận diện nội dung trước khi mở file.

Tạo ghi chú mới

Đặt markdownLive.defaultNoteDirectory nếu muốn ghi chú mới luôn nằm trong một thư mục như notes hoặc content/docs. Nếu để trống, tiện ích tạo ghi chú tại thư mục gốc của dự án.

Cấu hình thư mục mẫu

Đặt thư mục mẫu theo đường dẫn tương đối từ thư mục làm việc:

{
  "markdownLive.templateFolder": "templates"
}

Sau đó dùng Markdown Live: Insert Template (Chèn mẫu) hoặc Cmd/Ctrl + Shift + E để chèn mẫu vào tài liệu hiện tại. Bạn cũng có thể tạo ghi chú mới từ mẫu trong thanh bên.

Các biến thay thế được hỗ trợ

Khi chèn mẫu vào file hiện tại:

# <% tp.file.title %>

Ngày tạo: <% tp.date.now("YYYY-MM-DD") %>

Extension hỗ trợ:

• <% tp.file.title %>
• <% tp.date.now() %>
• <% tp.date.now("FORMAT") %> với các token ngày giờ cơ bản

Khi tạo ghi chú từ thanh bên, {{title}} được thay bằng tên ghi chú mới.

Cú pháp trên lấy cảm hứng từ tiện ích Obsidian Templater² nhưng chỉ hỗ trợ một số lệnh, không chạy JavaScript hoặc toàn bộ giao diện lập trình của Templater. Hãy kiểm tra các mẫu phức tạp trước khi chuyển từ Obsidian.

Tiếp theo: Sao chép có định dạng, in và xuất PDF.