Tip/warning/definition/description boxes in Markdown

Question

I need to create an usage instruction document and wanted to use Markdown for it.

To do this I need to create "eye catching" textbox like blocks containing definitions, warnings etc.

examples in this link

how do I do something like that ?

Edit 1: I discovered callouts, this semms exactly what I need, but I fail to use them in Markdown. Any tips on that?

Answer 1

That is not possible directly in Markdown. However, most Markdown convertes allow you to use HTML and CSS code mixed in the Markdown code. For example:

<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;">
I am a success message
</div>

<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1;">
I am an error message
</div>

<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #31708f; background-color: #d9edf7; border-color: #bce8f1;">
I am a info message
</div>

<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #8a6d3b;; background-color: #fcf8e3; border-color: #faebcc;">
I am a warning message
</div>

The result looks like that: