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

Question

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

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

里面的所有内容都是字面上的，因此无法使用里面的其他降价功能，例如链接或粗体文字...

markdown中是否有启用这种通知框的语法或功能？

Answer 1

markdown中是否有启用这种通知框的语法或功能？

是的，您可以使用原始HTML。如原文rules解释：

HTML是publishing格式； Markdown是一种[[writing格式。从而，Markdown的格式语法仅解决可能是用纯文本表达。

因此，在Markdown周围设置警告框的样式不在Markdown的范围内，因为这是

publishing

关注点，而不是写作关注点。但是，按照规则继续：

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

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

<div class="warning'>

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

</div>

当然，您还需要定义警告块的外观。在上面的示例中，我将warning类分配给了包装的<div>标签。还需要在文档中（在<style>标记中）定义一些CSS，以设置具有<div>类的任何warning的样式。 
或者，如果您的文档中只有一个警告框，则可以在内联style属性中定义样式：<div style="...">（用实际的CSS规则替换...。
警告！
不过请谨慎。如果您打算将文档渲染并托管在github.com上，则将无法使用。尽管GitHub的Markdown解析器将如上所述工作，但是GitHub出于安全原因也进行了一些后处​​理（如github/markup所述）。他们使用的sanitation filter将删除所有样式（内联与否）。在这种情况下，没有可用的选项。这同样适用于StackOverflow。

Answer 2

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

[经过一番搜索和实验后，我发现可以（ab）使用tables syntax，并与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>的粗体样式：

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