Try   HackMD
HackMD Error: 403 error

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.

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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 The text inside the green-colored block.

:::info

It shows blue colored block if you enter :::info

info The text inside the blue-colored block.

:::warning

It shows yellow colored block if you enter :::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

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...
::::

This is a blue colored block.

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:

Write any thing

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

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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.

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.

 

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Take a look in split view, so you can understand the syntax better!