如何在Markdown中创建一个文本框用于笔记？

Question

我正在使用Markdown写一份文档，并使用优秀的Pandoc从Markdown源文件生成docx和tex文件。我想在文档中添加一个“提示和注释”的文本框，就像编程书籍常常使用的方式。但是我无法在Markdown中实现这个功能。你能帮忙吗？

- TJB

---

Microsoft在他们的文档中使用自己的语法，但是这不太可能在你的环境中起作用。为了完整性和与下面答案的比较，将其包含在此处。https://github.com/MicrosoftDocs/PowerShell-Docs/blob/staging/contributing/4-MARKDOWN-SPECIFICS.md#note-warning-tip-important - brianary

相关问题。 - young_souvlaki

Answer 1

我通常在GitHub上插入一个引用块。

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

变为...

注： 注释内容。

当然，总是有纯HTML的选择...

- Vlad

---

我更喜欢这个通用解决方案。我还喜欢在注释前使用 Unicode 表情符号，比如 > ℹ️ 这是一个信息 或者 > ⚠️ 这是一个警告。 - pierre_loic

这个问题只有这个答案和table kludge是可移植的解决方案。顶部答案提出的硬规则修补程序无法显示框，因此无法解决这个问题。实际上，这个答案与@pierre_loic的Unicode图标mod大多复制了reStructuredText notes。 - Cecil Curry

严格来说，这也不是一个“框”。我认为“唯一”的答案应该是纯HTML，就像@Vlad提到的那样。从视觉上讲，我更喜欢“引用”的解决方案。然而，在上下文中，它可能与文档的其他部分不一致。在文档中，灰色的水平线与引用相关联。如果我从其他地方引用一个注释呢... - cartoonist

我们如何在这个笔记中添加一个有序列表（步骤）？ - Sach

在代码中添加 ⓘ 以渲染信息图标。因此，> **ⓘ** 注意文本。 - A.Casanova

Answer 2

通常我在Markdown文本中添加提示框（例如注释或警告）时，不仅在使用pandoc时，还在任何支持Markdown的地方，都会用两个水平线包围内容：

---
**NOTE**

It works with almost all markdown flavours (the below blank line matters).

---

这将类似于以下内容：

---

注意

它适用于所有的Markdown语法（下面的空行很重要）。

---

好处在于，您不需要担心支持哪种Markdown语法或已安装或启用哪个扩展。

编辑：正如@filups21在评论中提到的那样，在RMarkdown中，水平线由***表示。因此，最初声明此解决方案适用于所有Markdown语法是错误的。

- cartoonist

---

有用，但无法与RMarkdown/Rstduio/Knitr一起使用。 - bjw

在rmarkdown中，水平线为***，前面要有一个空行。或者，您可以通过在行首加上>（同样需要一个空行）将注释放入块引用中。 - filups21

我最喜欢这个，不过请注意：**NOTE:**需要与文字在同一行上。在文本前加上 > 可以让注释被框在三面，但是字体也会变灰。 - young_souvlaki

Answer 3

我通常会插入一个引用块并在其中添加一个Unicode字符(备忘录，它是(U+1F4DD))。

...

语法	示例
> bla bla ...	bla bla ...
> ```` bla bla	bla bla
> ** bla bla	bla bla

---

表情符号

当然，如果你不喜欢，你可以搜索你喜欢的。我相信你会找到一个满意的！

• 查找更多表情符号：https://emojipedia.org/

  只需搜索你喜欢的图标并复制粘贴即可（由于它是一个字符，所以适用于每种设备）。

• 查找代码

  如果您不喜欢复制粘贴并想要自己输入，请考虑搜索Unicode。

  

---

p.s. 您还可以关注表情符号版本（通常与Unicode版本相同），未来可能会出现更多图标，以满足您的需求。

• Unicode版本15.0

- Carson

---

这个工作很好，直到您需要生成PDF并且您使用的字体不包括该表情符号([警告]缺少字符：在字体DejaVu Sans / OT中没有(U+1F4DD)：script=latn;language=df)。 - ponsfrilus

Answer 4

我找到的解决相同问题的最简单方法是使用一个多行表格，其中只有一行且没有标题（第一列是图像，第二列是文本）：

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

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

另一个可能适用于PDF的方法是使用Latex默认的fbox指令：

 \fbox{My text!}

或使用 FancyBox 模块来获得更高级的功能（以及更好看的框）：http://www.ctan.org/tex-archive/macros/latex/contrib/fancybox。

- Etienne Savard

---

你知道在pandoc模板文件中是否可以定义pandoc-markdown注释的外观吗？例如，编辑~/.pandoc/templates/default.latex文件。 - tmaric

Answer 5

以下方法适用于GitHub、GitLab...以及现在使用CommonMark的Stackoverflow！ >使用块引用创建单行框

使用块引用创建单行框

`使用反引号创建单行框` 使用反引号创建单行框 ```
使用三个反引号创建框
```

Box made with Triple Backticks  

三个波浪线制作的框<sub><sup>（删除波浪线之间的空格以使其生效）</sup></sub>

Box made with Triple Tildes

每行开头用四个空格的盒子：

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

...还是使用水平线？

三个破折号（---）可以制作水平线：

---

注意: “你的关注决定了你的现实。”-奎冈·金。

---

对于更多的配置，我强烈推荐优秀的GitLab Markdown指南。
您也可以查看不太详细的GitHub基本格式语法。
您可以使用Babelmark比较Markdown实现。

有用的提示：

• 要强制换行，请在行尾放置两个空格；

• 要转义特殊字符，请使用\。

- kotchwane

---

“反引号框”使用等宽字体，这当然是代码块所需要的，但不适用于“信息框”。 - Cocowalla

@kotchwane 我非常喜欢你的语录！ - Nicolas Dion-Bouchard

Answer 6

截至2021年9月：
以下是使用HTML div标签和类“warning”在markdown中构建文本框的一种方法。它在Jupyter Notebook和Typora中运作得非常好。 您可以修改背景和字体颜色。

<div class="warning" style='padding:0.1em; background-color:#E9D8FD; color:#69337A'>
<span>
<p style='margin-top:1em; text-align:center'>
<b>On the importance of sentence length</b></p>
<p style='margin-left:1em;'>
This sentence has five words. Here are five more words. Five-word sentences are fine. But several together bocome monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It's like a stuck record. The ear demands some variety.<br><br>
    Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasent rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals -- sounds that say listen to this, it is important.
</p>
<p style='margin-bottom:1em; margin-right:1em; text-align:right; font-family:Georgia'> <b>- Gary Provost</b> <i>(100 Ways to Improve Your Writing, 1985)</i>
</p></span>
</div>

OR（在设计上增加了一点 - 圆角和边框）

<div class="warning" style='background-color:#E9D8FD; color: #69337A; border-left: solid #805AD5 4px; border-radius: 4px; padding:0.7em;'>
<span>
<p style='margin-top:1em; text-align:center'>
<b>On the importance of sentence length</b></p>
<p style='margin-left:1em;'>
This sentence has five words. Here are five more words. Five-word sentences are fine. But several together bocome monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It's like a stuck record. The ear demands some variety.<br><br>
    Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasent rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals -- sounds that say listen to this, it is important.
</p>
<p style='margin-bottom:1em; margin-right:1em; text-align:right; font-family:Georgia'> <b>- Gary Provost</b> <i>(100 Ways to Improve Your Writing, 1985)</i>
</p></span>
</div>

- rahul-ahuja

---

完全离题：Gary Provost 的这句话引用太棒了！ - Tarc

这在技术上是正确的，因为Markdown基本语法允许使用原始HTML...但您建议通过根本不使用Markdown来创建Markdown信息框XD XD - Ilario

你好！这在HTML中运行得非常好，但如果我将其编织到Word中，颜色和格式都会消失！您有任何建议如何使其正常工作吗？ - Gabriella

Answer 7

使用 admonition 扩展功能。对于 mkdocs，可以在 mkdocs.yml 文件中进行配置：

markdown_extensions:
    - admonition

然后按照以下方式将此注释插入到您的md文件中：

!!! note

     This is a note.

查看示例在这里。

- Boni García

Answer 8

这是一个基于Latex的简单示例。

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

这导致： 不幸的是，由于这是 LaTeX，您不能在TODO框内再包含Markdown（通常情况下这不是大问题），且在转换为其他格式（如html）时也无法正常工作。

- naught101

Answer 9

您尝试使用双制表符了吗？来创建一个框：

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

对于普通的Rmarkdown文档，以html为输出格式，它可以正常工作。双制表符部分应该出现在一个圆角矩形浅灰色框中。

- Cho Jay

---

也适用于VS Code和GitHub！ - Nagev

两个制表符本身并不能“制作一个框”，它是用于“预格式化文本”的：https://stackoverflow.com/editing-help#code - sdbbs

Answer 10

与Etienne的解决方案类似，一个简单的表格格式化得很好：

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

---

请注意文本后面的空行。

- Gordon Bean

---

我非常喜欢这个解决方案，但是当我通过pandoc和xelatex将其转换为PDF时，似乎它将50％的空间分配给“NOTE”列，另外50％分配给另一列；可以按照https://dev59.com/w14d5IYBdhLWcg3wDvC1使用多行表格-但是那样会出现其他格式问题。 - sdbbs