Giao diện

Cài đặt và sử dụng ​

Cài đặt ​

Plugin @digiforce-nc/plugin-block-markdown thường được cài sẵn trong bản phân phối chính. Kích hoạt qua trang Plugin Manager.

Plugin hoàn toàn client-side — nội dung markdown lưu trong block schema props, không cần database riêng.

Thêm Markdown block ​

  1. Mở trang ở chế độ thiết kế (Schema Editor).
  2. Click Add block → chọn Markdown.
  3. Block xuất hiện với nội dung trống, sẵn sàng soạn thảo.

Soạn thảo nội dung ​

Vditor Editor ​

Plugin sử dụng Vditor — trình soạn thảo Markdown WYSIWYG mã nguồn mở:

  1. Click vào block để chuyển sang chế độ edit.
  2. Viết nội dung markdown — editor hiển thị live preview.
  3. Sử dụng toolbar để format: bold, italic, heading, list, link, image, table.
  4. Click ra ngoài block (blur) → nội dung tự động lưu vào schema props.

Cú pháp Markdown hỗ trợ ​

  • CommonMark đầy đủ: heading, paragraph, list, link, image, code block
  • GFM (GitHub Flavored Markdown): table, task list, strikethrough
  • Code highlighting: Syntax highlighting cho code blocks

Hỗ trợ công thức toán (KaTeX) ​

Viết công thức toán học LaTeX, Vditor tự động render qua KaTeX:

  • Inline: $e^{i\pi} + 1 = 0$
  • Block: $$\sum_{i=1}^{n} x_i$$

KaTeX được tải từ CDN khi nội dung chứa cú pháp toán.

Hỗ trợ sơ đồ (Mermaid) ​

Tạo sơ đồ flowchart, sequence, ER diagram bằng code block mermaid:

markdown
```mermaid
flowchart LR
    A --> B --> C
```

Mermaid cũng tải từ CDN khi cần.

Hỗ trợ biểu đồ (ECharts) ​

Tạo biểu đồ tương tác bằng code block echarts với JSON config:

markdown
```echarts
{"xAxis":{"type":"category","data":["A","B","C"]},"yAxis":{"type":"value"},"series":[{"data":[10,20,30],"type":"bar"}]}
```

Hỗ trợ Flowchart.js ​

Tạo sơ đồ luồng đơn giản bằng code block flowchart với cú pháp Flowchart.js.

Lưu trữ ​

Nội dung markdown được lưu trong x-component-props.content của block schema — nhẹ nhàng, không tốn database query riêng.

Mẹo

Markdown block lý tưởng cho hướng dẫn sử dụng, ghi chú, mô tả quy trình — bất kỳ nơi nào cần nội dung văn bản phong phú mà không cần tạo collection riêng.