Markdown user guide

更新时间:
复制 MD 格式

Markdown is a lightweight markup language. It lets you write documents in an easy-to-read, easy-to-write plain text format that can be converted to structured HTML pages. This guide explains the basic usage of Markdown.

Basic syntax

  1. Headings

    Use the # symbol to create headings of different levels. The number of # symbols determines the heading level. Level one is the largest and level six is the smallest.

    Important

    Add a space between the # symbol and the heading text.

    # Heading level 1
    ###### Heading level 6
  2. Paragraphs

    Separate paragraphs with a blank line.

  3. Emphasis

    To bold or italicize text, add an asterisk * or an underscore _ before and after a word or phrase.

    Italic: *Italic* or _Italic_.

    Bold: **Bold** or __Bold__.

    Bold and Italic: ***Bold and Italic*** or ___Bold and Italic___.

    **Alibaba Cloud Low-Code Development Platform** (or *Low-Code Development Platform*) is a model-driven, low-code development platform for all terminals (**Web, H5, all-platform miniapps, and Apps**). It provides one-stop application full lifecycle management, including *visual development*, *publishing*, and *O&M*. Based on a cloud-native architecture, it offers scalability and low-cost Alibaba Cloud Managed Services to help customers efficiently solve problems in **application R&D, iteration, and O&M**.

    image.png

  4. Lists

    For unordered lists, use an asterisk *, a plus sign +, or a hyphen -. For ordered lists, use a number followed by a period ..

    # Today's Workout Schedule
    
    - **Warm-up** (5 minutes)
    - **Strength Training** (20 minutes)
    - **Cardio** (15 minutes)
    - **Stretching** (5 minutes)

  5. Links

    Link syntax: [Link display name](Hyperlink address "Optional link title").

    Important

    Markdown syntax does not support specifying a target window for links. To do so, use HTML syntax and add the target attribute.

    [Alibaba Cloud Official Website](https://www.aliyun.com/  "This is the Alibaba Cloud official website address")

  6. Images

    Inserting an image is similar to inserting a link. You only need to add an exclamation mark ! at the beginning.

    Syntax: ![Image alt](Image address "Optional image title") (Image alt is the alternative text that is displayed when an image cannot be loaded.).

    ![Image lost](https://img.alicdn.com/imgextra/i3/O1CN01sYjC4A27uYtiJvXTu_!!6000000007857-2-tps-193-128.png "This is an image")

  7. References

    A blockquote is used to format text as a quotation or a cited paragraph. Blockquotes are often used to highlight opinions, famous quotes, or important information. To create a blockquote, add a > symbol before the paragraph. If a blockquote contains multiple paragraphs, add a > symbol on the blank line between them. To create a nested blockquote, add a >> symbol before the paragraph that you want to nest.

    We [visited the Alibaba Cloud](https://www.alibabacloud.com/) website and viewed information about the [Low-Code Development Platform](https://help.aliyun.com/zh/mobi/).
    >
    > The Low-Code Development Platform is an AI-native, low-code application development platform designed for professional developers on Alibaba Cloud. It integrates the Qwen Large Language Model (LLM) to make development and applications smarter. The Low-Code Development Platform provides one-stop application full lifecycle management, including visual development, publishing, and O&M. Based on a cloud-native architecture, it offers scalability and low-cost Alibaba Cloud Managed Services to help developers efficiently solve problems in application R&D, iteration, and O&M.

    image.png

  8. Inline code blocks

    Inline code blocks are used to represent text such as code or commands, which distinguishes them from the surrounding content. To create an inline code block, wrap the text in backticks `.

    In Moflow, you can use the `hidden()` function to hide a component, for example:
    text1.hidden()

  9. Line separators

    A line separator, also known as a horizontal rule, creates a visual separation in the text to help organize and distinguish content. To create a line separator, use three or more hyphens -, asterisks *, or underscores _.

  10. Tables

    Tables are constructed from pipes (|) and hyphens (-). Hyphens define column alignment.

    # Task List
    
    | Task                   | Owner   | Due Date   | Status      |
    |------------------------|---------|------------|-------------|
    | Prepare project report | Alice   | 2024-10-15 | Not Started |
    | Update website content | Bob     | 2024-10-20 | In Progress |
    | Design new brochure    | Charlie | 2024-10-18 | Completed   |
    | Conduct user research  | David   | 2024-10-25 | Not Started |

  11. Strikethrough

    Strikethrough indicates that text has been deleted or is no longer valid. It is often used to highlight outdated information or show a change in opinion. You can create a strikethrough effect by adding two tildes ~~ before and after the text.

    Original price ~~998~~, Double 12 special price only 198

  12. Task list

    A task list tracks the completion status of to-do items. It is often used in code documentation, project management, and notes to provide a clear overview of progress.

    You can use the following syntax to create a task list:

    • Use- [ ] for an incomplete task.

    • Use - [x] for a completed task.

    ## Personal Life Tasks
    
    - [x] Exercise three times a week
    - [x] Read a new book
    - [ ] Organize a family gathering
    - [ ] Learn a new skill

Usage examples

Example 1: Displaying product prices

This example uses container, text, and image components to create the display for a single product in a product list. The price and discount sections use two text components in Markdown mode to create an effect similar to a price tag.

Important

You can enable the Mobi Enhanced Rendering configuration to support HTML content.

Example code for the price section:

<span style='font-size:34px'>1980.60</span> <span>CNY/itemMin. 1 item </span>

<span>1980.60</span> <span style='font-size:34px'>1680.60</span> <span>CNY/itemMin. 11 items </span>

<span>1980.60</span> <span style='font-size:34px'>1680.60</span> <span>CNY/itemMin. 11 items </span>

image.png

Example 2: Corporate news list

This example uses a text component to display a corporate news module. It uses list syntax and span tags for style customization.

### Corporate News

- [Industry] With a total investment of CNY 5 million, Dalian's industrial enterprise digital transformation park will be operational next March.
2024-09-17
- [Industry] Three major carriers battle for computing power, competing to be China's "King of Computing Power"
2024-09-17
- [Globalization] Chinese stationery is a big seller in Africa
2024-09-17

You can use this method to display real-time data.

Example 3: Quickly generating Markdown documents

When you need to create a structured document, obtain a starting point and framework, or automatically generate a report or summary from existing data, you can use the Mobi chat component to quickly generate a Markdown document.