如何在 Github Flavored Markdown 中创建一个好看的通知或警告框？

Question

我正在寻找一些简单的东西，比如三重反引号，但它仍然允许内部使用其他降价语法。
三重反引号不是这种情况，因为它用于代码块：

**NOTE:**
Find the docs [here](http://example.com/).

里面的所有东西都是字面意思，所以不可能在里面使用其他降价功能，比如链接或粗体文本......

Markdown 中是否有启用此类通知框的语法或功能？

Answer 1

GitHub 有特定的语法来创建警告框。请参阅 Github 讨论页面了解更多信息。

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

Answer 2

正如 Waylan 在他的回答中提到的，Github 在显示之前从 Markdown 中去除了 script 和 style 标签。这意味着将在 Github 上呈现的通知框的唯一可能性是由本机 markdown 或 html 提供的那些。

经过一些搜索和试验，我发现可以（ab）使用 表格语法，
并将其与Github emoji markdown结合使用。

例如：

• 来自单个单元格表的框：

  | :exclamation:  This is very important   |
  |-----------------------------------------|
  
  
  | :zap:        Ignore at your own risk!   |
  |-----------------------------------------|
  

  

• 具有 2 个单元格的单行表中的框：

  | :memo:        | Take note of this       |
  |---------------|:------------------------|
  
  
  | :point_up:    | Remember to not forget! |
  |---------------|:------------------------|
  

  

• 来自 2 行表的框：

  | :warning: WARNING          |
  |:---------------------------|
  | I should warn you ...      |
  
  
  | :boom: DANGER              |
  |:---------------------------|
  | Will explode when clicked! |
  

  

请注意，降价表不允许换行，因此<br />如果您需要在框内多行，则应使用标签。在这种情况下，直接使用 html<table>标签可能更简单，因为它没有这个换行限制。它还允许<thead>通过用<th>标签替换其标签来摆脱表格标题的粗体样式<td>：

| :exclamation:  This is very important   |
|-----------------------------------------|


| :zap:        Ignore at your own risk!   |
|-----------------------------------------|

Answer 3

\n

Markdown 中是否有任何语法或功能可以启用此类通知框？

\n

\n

是的，您可以使用原始 HTML。正如最初的规则所解释的：

\n

\n

HTML 是一种发布格式；Markdown 是一种写作格式。因此，\nMarkdown\xe2\x80\x99s 格式化语法仅解决\n可以纯文本表达的问题。

\n

\n

因此，在某些文本周围设置警告框样式超出了 Markdown 的范围，因为这是发布问题，而不是写作问题。然而，随着规则的继续：

\n

\n

对于 Markdown\xe2\x80\x99s 语法未涵盖的任何标记，您只需\n使用 HTML 本身。

\n

\n

当您使用 Github Flavored Markdown 时，您可以获得额外的好处，即当格式正确时，您仍然可以在块级原始 HTML 标记中处理 Markdown（只要您使用的解析器符合规范）。作为规格解释的，Markdown 在第一个空行之后的原始 HTML 块中进行处理。因此，只需在原始 HTML 起始标记后添加一个空行，就不会有任何问题。

\n

<div class="warning">\n\n**NOTE:**\nFind the docs [here](http://example.com/).\n\n</div>\n

\n

当然，您还需要定义警告块的外观。在上面的示例中，我将warning类分配给包装<div>标签。还需要在文档中（在标签中<style>）定义一些 CSS，以对<div>具有该类的任何warning内容进行样式化。

\n

style或者，如果文档中只有一个警告框，您可以在内联属性中定义样式：（<div style="...">替换...为实际的 CSS 规则）。

\n

警告！

\n

不过请注意。如果您计划在github.com上呈现和托管文档，则这将不起作用。虽然 GitHub 的 Markdown 解析器将按上述方式工作，但出于安全原因，GitHub 还会进行一些后处理（如github/markup中所述）。他们使用的卫生过滤器将去除所有样式（内联或非内联）。在这种情况下，没有可用的选项。这同样适用于 StackOverflow。

\n