Enclosing the string with four =
signs on each side, like this colored text, will create a highlight effect!
Highlight effect
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.
It shows green colored block if you enter :::success
success The text inside the green-colored block.
It shows blue colored block if you enter :::info
info The text inside the blue-colored block.
It shows yellow colored block if you enter :::warning
The text inside the yellow-colored block. It also supports other syntax,such as
It shows red colored block if you enter :::danger
The text inside the red-colored block. You can make the text bold if you want to.
Quotation
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...
::::
This is a blue colored block.
Inserting another yellow one
Write anything you like…
It will show a string with a triangle arrow if you enter :::spoiler
Write any thing
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.
Enter >[!]
, and HackMD will automatically read block quote alert menus, allowing you to choose the style you want to apply
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.
Take a look in split view
Helpful advice for doing things better or more easily.
URGENT REQUEST
Key information users need to know to achieve their goal.
Hey Charlie
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.