{%hackmd rJ_1SdPkxx %}

# Highlight effect
Enclosing the string with four `=` signs on each side, like ==this colored text==, will create a highlight effect!

==Highlight effect==

# Add a colored block to emphasize content
Enter three colon `:::` and the color blocks menu will show up automatically.

**success / info / warning / danger**

Each will correspond to different colors.


The content between each set of triple colons `:::` represents the content within the color block.

## There are four types of colored blocks.
### :::success
It shows green colored block if you enter `:::success`
:::success
success The text inside the green-colored block.
:::

### :::info
It shows blue colored block if you enter `:::info`
:::info
info The text inside the blue-colored block.
:::

### :::warning
It shows yellow colored block if you enter `:::warning`

:::warning
The text inside the yellow-colored block. It also supports other syntax,such as
## H2
:::

### :::danger
It shows red colored block if you enter `:::danger`

:::danger
The text inside the red-colored block. You can make the text **bold** if you want to.
>Quotation
1. Ordered list
- Non-ordered list
:::

### Extended learning

**How can you include one colored block within another?**

**Or, if you want to add a collapsible arrow(:::spoiler) within a colored block, what should you do?**

In Markdown, you can customize your desired presentation by inputting different levels of colored blocks.

You have already learned to use three colons `:::warning` and `:::` to create a colored block. Now, add another set of four colons `::::info` and `::::` around it, like layers of an onion, to present your colored blocks layer by layer.

For example:

::::info
This is a blue colored block.
:::warning
Inserting another yellow one
:::
Write anything you like...
::::

::::info
This is a blue colored block.
:::warning
Inserting another yellow one
:::
Write anything you like...
::::

# Collapsing, to keep the layout tidy.
It will show a string with a triangle arrow if you enter `:::spoiler`

### Here's how it looks:

:::spoiler
Write any thing
:::

:::spoiler Click here
You can enter any text after`:::spoiler` followed by a space, and then any text, to replace the text next to the arrow.

>Quotation is supported

Of course, including **bold**, *italic*, and ==highlight==.

:::

# Quoted alert

Enter `>[!]`, and HackMD will automatically read block quote alert menus, allowing you to choose the style you want to apply


### There are a total of five types of warning styles.

You can choose the style to use according to different situations. If you do not enter replacement text, the default text will be displayed. You can directly input the text you want to replace after the `[!NOTE]`. For example:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]Take a look in split view
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]URGENT REQUEST
> Key information users need to know to achieve their goal.

> [!WARNING]Hey Charlie
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

 

:pushpin: Take a look in [**split view**](https://hackmd.io/O9LAhzCqTCmqgUm_ht-Lmg?both), so you can understand the syntax better!