Markdown Blocks Tips and Tricks
Markdown Block is one of the most commonly used and powerful blocks in our system. It can range from lightweight text prompts to simple HTML styling, and can even handle essential business logic—with versatile and flexible functionality.
1. Basic Functions of the Markdown Block
Due to the flexible, open, and easily modifiable nature of the Markdown block, it is often used to display system announcements. Whether it is a business module, a feature, a block, or even a field, we can post little tips just like using sticky notes.
Before using the Markdown block, it is recommended that you first familiarize yourself with Markdown formatting and syntax. You can refer to the Vditor Example.
Note: The Markdown block on the page is relatively lightweight, and certain features (such as mathematical formulas, mind maps, etc.) are currently not supported for rendering. However, we can implement them using HTML; the system also provides a Vditor field component for you to try.
1.1 Page Examples
You can observe the use of Markdown on the system’s “Online Demo” page. Specific examples can be found on the home page, the order page, and in the “More Examples” section.
For instance, the warnings and tips on our homepage:
The calculation logic in the order module:
Guidance and images in the “More Examples” section:
By switching to edit mode, you can modify the Markdown content at any time and observe the changes on the page.
1.2 Creating a Markdown Block
You can flexibly create Markdown blocks in pages, pop-ups, and forms.
1.2.1 Creation Methods
-
Creating in Pop-ups/Pages:
-
Creating in Form Blocks:
1.2.2 Usage Examples
By typing --- using Markdown syntax, you can simulate a horizontal grouping line to achieve simple content separation, as demonstrated below:
2. Personalized Content Display
Another major advantage of Markdown blocks is that they support system variable interpolation, which helps generate personalized titles and tip messages—ensuring that each user sees a unique display within their form.
In addition, you can combine form data to perform simple content formatting, as illustrated in the following example:
Highlighted Title Example:
Centered Divider Example:
3. Enriching Content with Additional Elements
As you become more familiar with Markdown syntax and variables, you can also enrich Markdown blocks with additional content, such as HTML!
3.1 HTML Example
If you are not familiar with HTML syntax, you can let Deepseek help write it (note that the script tag is not supported; it is recommended that all styles be written within a local div).
Below is an elegant announcement example:
3.2 Animation Effect Example
We can even combine CSS to implement simple animation effects—similar to a slideshow that dynamically shows and hides content. Try pasting the following code into your Markdown to see it in action!
