Markdown 區塊是我們最常用且功能強大的區塊之一。它從輕量級文本提示到簡單的 HTML 樣式，甚至可以承擔重要的業務邏輯，功能多樣而靈活。

一、Markdown 區塊的基本功能

由於 Markdown 區塊具有靈活、公開和隨時可更改的特點，它常被用於展示系統公告。無論是業務模塊、功能、區塊還是字段，我們都可以像小便利貼一樣，隨時貼上我們想要的小提示。

在使用 Markdown 區塊之前，建議先熟悉 Markdown 的排版和語法。可以參考 Vditor 示例。

注意：頁面中的 Markdown 區塊相對輕量，某些功能（如數學公式、腦圖等）暫時不支持渲染。但我們可以使用 HTML 實現，系統中也提供了 Vditor 的字段組件，歡迎體驗。

1.1 頁面示例

我們可以在系統“在線Demo”的頁面觀察 Markdown 的使用，具體可以查看首頁、訂單頁以及“更多示例”。

例如我們首頁的警告、提示：

訂單模塊的計算邏輯：

更多示例裏面的引導和圖片：

通過切換編輯模式，我們可以隨時更改 Markdown 內容，觀察頁面變化。

1.2 創建 Markdown 區塊

在頁面、彈窗和表單中，我們都可以靈活地創建 Markdown 區塊。

創建方式

• 彈窗/頁面中創建：

  

• 表單區塊中創建：

  

用法示例

通過 Markdown 語法輸入 --- 可模擬分組橫線，實現簡單的內容分隔效果，如下所示：

二、個性化內容展示

Markdown 區塊的另一大優勢在於支持系統變量填充，幫助生成個性化標題和提示信息，從而確保每位用户在各自的表單中看到獨特的信息展示。

此外，還可以結合表單數據進行簡單的內容排版，如下示例所示：

突出標題示例：

# #{{$nRecord.id}} {{$nPopupRecord.task_name}}

---

居中分隔示例：

三、豐富內容的填充

在逐漸熟悉 Markdown 語法和變量的同時，我們還可以在 Markdown 區塊中填充更豐富的內容，比如 HTML！

3.1 HTML 示例

如果你沒有接觸過HTML 語法，可以讓 Deepseek 幫我們代寫（注意不支持 script 標籤，推薦所有樣式寫在局部的 div 中）。

以下是一個華麗的公告示例：

<div style="font-family: 'Arial', sans-serif; background-color: #e9f5ff; margin: 20px; padding: 20px; border: 2px solid #007bff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
    <h1 style="color: #007bff; text-align: center; font-size: 2em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">Join Us for a Fun Getaway!</h1>
    <p style="font-size: 1.2em; line-height: 1.6; color: #333;">Hi Everyone,</p>
    <p style="font-size: 1.2em; line-height: 1.6;">We're excited to invite you to an awesome group outing filled with laughter, adventure, and great vibes!</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Mark your calendars for <span style="color: red; font-weight: bold; font-size: 1.5em;">November 10, 2025</span>, and get ready to explore, relax, and enjoy some quality time together.</p>
    <p style="font-size: 1.2em; line-height: 1.6;">We'll share more details about the itinerary and meeting spot soon—stay tuned!</p>
    <p style="font-size: 1.2em; line-height: 1.6; font-style: italic;">Can't wait to see you there!</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Cheers,</p>
    <p style="font-size: 1.2em; line-height: 1.6;">Your Event Team</p>
</div>

3.2 動畫效果示例

我們甚至可以結合 CSS 實現簡單的動畫效果，類似幻燈片的動態顯示隱藏（試着將以下代碼粘貼到 Markdown 裏看看！）：

<div style="background-color: #f8e1e1; border: 2px solid #d14; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); animation: fadeInOut 3s infinite;">
    <h2 style="color: #d14; font-family: 'Arial', sans-serif;">🎉 Special Announcement 🎉</h2>
    <p style="color: #333; font-size: 18px; font-family: 'Georgia', serif;">Thank you for your support and attention! We will hold a special event next Monday, stay tuned!</p>
    <button style="background-color: #d14; color: white; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer;">Click to Learn More</button>
</div>

<style>
@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translateY(-20px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
}
</style>