如何在Github Flavoured Markdown中创建漂亮的通知或警告框？

Question

我希望找到像三个反引号一样简单的东西，但仍然允许其他 Markdown 语法。
但这不适用于三个反引号，因为它用于代码块：

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

所有内容都是按照字面意思解释的，因此不可能在其中使用其他Markdown功能，如链接或粗体文本...

Markdown中是否有任何语法或特性可以启用这样的通知框？

- David Deprost

---

你有考虑过使用块引用吗？ - Waylan

是的，那是我目前正在使用的，但我并不真的喜欢它们的外观（灰色和没有边框框）。警告框应该更加明显而不是更少。 - David Deprost

Answer 1

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

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

例如：

• Boxes from a single cell table:

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

  

• Boxes from a single row table with 2 cells:

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

  

• Boxes from a 2 row table:

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

  

请注意，Markdown表格不允许换行，因此如果需要在方框内使用多行，请使用<br />标签。在这种情况下，直接使用HTML <table>标签可能更简单，因为它没有这个换行限制。同时，可以通过将<thead>的<th>标签替换为<td>标签来取消表头的粗体样式。{{注意保留代码标签和尖括号符号}}

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

- David Deprost

---

这应该是答案。我只想为Typora添加一些要点。方框可以工作，但用户需要手动删除自动粘贴的三个反引号。在HTML示例中，仅thead部分有效，此外不支持表情符号。 - Rapekas

我确认：这就是答案。 - dlewin

同意。这是我用了相当长时间的方法。似乎效果不错——不仅限于GitHub风格的Markdown（GFM）。 - ScottWelker

Answer 2

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.

- Robert Lu

---

请问您能分享一下源代码吗？我在官方文档 https://github.github.com/gfm 中没有找到。不过它确实可以工作。 - Georgiy Bukharov

@GeorgiyBukharov 源在左边，查找在右边。 - Robert Lu

参考资料：https://github.com/github-community/community/discussions/16925 （GitHub工作人员的公告）大家好，我们想在这里通知你们，我们已经做出了一些关于GitHub社区的改变。我们希望通过这些改变来提高社区的可访问性和易用性，并让大家更容易地使用GitHub。我们将继续关注这个社区的发展，并且会积极地寻找新的方法来改善我们的服务。我们感谢大家一直以来对GitHub的支持。谢谢！ - Nemo

Answer 3

是否有任何markdown语法或功能可以启用这样的通知框？

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

HTML是一种发布格式；Markdown是一种编写格式。因此，Markdown的格式语法仅涉及可用纯文本传达的问题。

因此，在一些文本周围设置警告框的样式超出了Markdown的范围，因为这是一个发布关注点，而不是编写关注点。但是，正如规则继续指出的那样：

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

由于您使用的是Github Flavored Markdown，因此您可以获得额外的好处，即在正确格式化时，仍然可以在块级原始HTML标记内处理Markdown（只要您使用的解析器符合规范）。正如规范所解释的那样，在第一个空行之后，在原始HTML块内处理Markdown。因此，只需在打开原始HTML标记后包含一个空行，就不会出现任何问题。

<div class="warning">

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

</div>

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

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

警告！

不过需要注意的是，如果您计划将文档呈现并托管在github.com上，这是行不通的。虽然GitHub的Markdown解析器会按照上述描述工作，但为了安全起见，GitHub还进行了一些后处理（如github/markup所记录的那样）。它们使用的sanitation filter将剥离所有样式（内联或非内联）。在这种情况下，没有可用的选项。在StackOverflow上也是同样的情况。

- Waylan

---

谢谢，这真的很有用。在github.com上呈现，是否可以链接一个Web组件？或者它也会被剥离？ - David Deprost

GitHub.com上允许使用的CSS/JavaScript等仅限于GitHub提供的内容。无论您如何尝试包含第三方CSS/JavaScript等，它都会被剥离。 - Waylan