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

Question

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

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

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

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

Answer 1

正如 Waylan 在他的回答中提到的那样，Github 在显示之前从 markdown 中去除脚本和样式标签。 这意味着将在 Github 上呈现的通知框的唯一可能性是原生 markdown 或 html 提供的通知框。

经过一番搜索和试验，我发现可以（ab）使用表格语法，
并将其与Github 表情符号 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! |

  

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

<table>
  <thead>
    <tr>
      <td align="left">
        :information_source: Information
      </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <ul>
          <li>Tis not true.</li>
          <li>I won't explode.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

最近，Github Flavored Markdown 支持注释或警告块引用：

记录在这里

Answer 3

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

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

HTML 是发布格式； Markdown 是一种书写格式。 因此，Markdown 的格式化语法只解决了可以用纯文本表达的问题。

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

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身即可。

An as you are using Github Flavored Markdown, you get the added benefit that when formatted properly, you can still have Markdown processed within the block level raw HTML tags (so long as the parser you are using is compliant with the spec). 正如规范所解释的，Markdown 在第一个空白行之后的原始 HTML 块内处理。 因此，只需在打开的原始 HTML 标记后包含一个空行，您就不会遇到任何问题。

<div class="warning">

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

</div>

当然，您还需要定义警告块的外观。 在上面的示例中，我将warning class 分配给了包装<div>标签。 一些 CSS 还需要在文档中定义（在<style>标记中）以设置任何具有warning class 的<div>的样式。

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

警告！

不过要注意一点。 如果您计划在github.com上呈现和托管您的文档，这将不起作用。 虽然 GitHub 的 Markdown 解析器将如上所述工作，但 GitHub 也出于安全原因进行一些后处理（如github/markup中所述）。 他们使用的卫生过滤器将去除所有 styles（无论是否在线）。 在这种情况下，没有可用的选项。 这同样适用于 StackOverflow。