[markdown] How can I create a text box for a note in markdown?

I am writing a document in markdown. I am using the wonderful pandoc to create docx and tex files from the markdown source. I would like to have a textbox for tips and notes to readers the way programming books often do. I cannot figure out how to do this in markdown. Can you help?

Another solution is to use CSS adjacency and use h4 (or higher):

#### note

This is the note content

h4 {
  display: none; /* hide */
}

h4 + p {
  /* style the note however you want */
}

Here's a simple latex-based example.

---
header-includes:
    - \usepackage[most]{tcolorbox}
    - \definecolor{light-yellow}{rgb}{1, 0.95, 0.7}
    - \newtcolorbox{myquote}{colback=light-yellow,grow to right by=-10mm,grow to left by=-10mm, boxrule=0pt,boxsep=0pt,breakable}
    - \newcommand{\todo}[1]{\begin{myquote} \textbf{TODO:} \emph{#1} \end{myquote}}
---

blah blah

\todo{something}

blah

which results in:

Unfortunately because this is latex, you can no-longer include markdown inside the TODO box (which is not a huge problem, usually), and it won't work when converting to formats other than PDF (e.g. html).

You may also use https://www.npmjs.com/package/markdown-it-container

::: warning
*here be dragons*
:::

Will then render as:

<div class="warning">
<em>here be dragons</em>
</div>

The simplest solution I've found to the exact same problem is to use a multiple line table with one row and no header (there is an image in the first column and the text in the second):

----------------------- ------------------------------------
![Tip](images/tip.png)\ Table multiline text bla bla bla bla
                        bla bla bla bla bla bla bla ... the
                        blank line below is important 

----------------------------------------------------------------

Another approach that might work (for PDF) is to use Latex default fbox directive :

 \fbox{My text!}

Or FancyBox module for more advanced features (and better looking boxes) : http://www.ctan.org/tex-archive/macros/latex/contrib/fancybox.

I usually insert a blockquote and add a Unicode character(memo which is(U+1F4DD)) inside it.

...

Emoji

Of course, if you do not like you can search you like. I am sure there will be one in it is your satisfaction!

• find more emoji: https://emojipedia.org/

  just search you like icon and copy-paste then done(since it is a character, so it suitable for every device)

• find Code

  If you don't like copy paste and want to type yourself, you can consider searching the Unicode.

  

p.s. You can also pay attention to the emoji version (usually it is the same as the Unicode version), and more icons may appear in the future to your satisfaction.

• Unicode Version 14.0
• Emoji Version 14.0

Have you tried using double tabs? To make a box:

Start on a fresh line
Hit tab twice, type up the content
Your content should appear in a box

It works for me in a regular Rmarkdown document with html output. The double-tabbed portion should appear in a rounded rectangular light grey box.

The following methods work on GitHub, on GitLab... and on Stackoverflow, which now uses CommonMark!

> One-Line Box made with Blockquote

One-Line Box made with Blockquote

`One-Line Box made with Backticks`

One-Line Box made with Backticks

```
Box made with Triple Backticks
```

Box made with Triple Backticks  

~ ~ ~
Box made with Triple Tildes _{^{(remove the spaces between the tildes to make this work)}}
~ ~ ~

Box made with Triple Tildes

Box made with Four Spaces at the start of each line:

    “Sometimes we must let go of our pride and do what is requested of us.”
    Padmé Amidala

... or use horizontal lines?

Three dashes (---) make a horizontal line:

Note: “ Your focus determines your reality.” – Qui-Gon Jinn.

For more configurations, I strongly advise the excellent GitLab Markdown Guide.
You can also check the less detailed GitHub basic formatting syntax.
You can compare Markdown implementations using Babelmark.

Useful hints :

• to force a newline, put two spaces at the end of the line;

• to escape special characters, use \.

Similar to Etienne's solution, a simple table formats nicely:

| | |
|-|-|
|`NOTE` | This is something I want you to notice. It has a lot of text, and I want that text to wrap within a cell to the right of the `NOTE`, instead of under it.|

Another alternative (which comes with more emphasis), is to make the content the header of a body-less table:

|`NOTE` | This is something I want you to notice. It has a lot of text, and I want that text to wrap within a cell to the right of the `NOTE`, instead of under it.|
|-|-|

Finally, you can include a horizontal line (thematic break) to create a closed box (although the line style is a little different than the header line in the table):

| | |
|-|-|
|`NOTE` | This is something I want you to notice. It has a lot of text, and I want that text to wrap within a cell to the right of the `NOTE`, instead of under it.|

---

Note the empty line after the text.

With GitHub, I usually insert a blockquote.

> **_NOTE:_**  The note content.

becomes...

NOTE: The note content.

Of course, there is always plain HTML...

Use the admonition extension. For mkdocs, it can be configured in the mkdocs.yml file:

markdown_extensions:
    - admonition

Then insert the note in your md files as follows:

!!! note

     This is a note.

See an example here.