Как создать красивое окно уведомлений или предупреждений в Github Flavored Markdown?

Question

Я ищу что-то простое, например тройные обратные пометки, но это все же допускает использование другого синтаксиса уценки внутри.
Это не относится к тройным обратным ударам, поскольку оно используется для блоков кода:

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

Все внутри взято буквально, поэтому невозможно использовать другие функции уценки внутри, такие как ссылки или полужирный текст ...

Есть ли какой-либо синтаксис или функция в уценке, которая позволяет такие окна уведомлений?

Answer 1

Есть ли в уценке какой-либо синтаксис или функция, которая включает такие окна уведомлений?

Да, вы можете использовать необработанный HTML. Как объясняют исходные правила :

HTML - это формат публикации ;Уценка - это запись формат. Таким образом, синтаксис форматирования Markdown решает только те проблемы, которые могут быть переданы в виде простого текста.

Поэтому создание рамки предупреждения вокруг некоторого текста выходит за рамки Markdown, так как это публикация беспокойство, а не писательское дело. Однако, поскольку правило продолжается:

Для любой разметки, не охватываемой синтаксисом Markdown, вы просто используете сам HTML.

An, так как вы используете Github Flavored Markdownвы получаете дополнительное преимущество, заключающееся в том, что при правильном форматировании вы можете обрабатывать Markdown в необработанных HTML-тегах уровня блока (при условии, что используемый вами анализатор соответствует спецификации). Как объясняет spec , Markdown обрабатывается в необработанном HTML-блоке после первой пустой строки. Просто добавьте пустую строку после открывающего тега HTML, и у вас не возникнет никаких проблем.

<div class="warning'>

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

</div>

Конечно, вам также нужно будет определить, как выглядит ваш блок предупреждений. В приведенном выше примере я назначил класс warning тегу <div> для переноса. Некоторый CSS также должен быть определен в документе (в теге <style>) для стилизации любого <div>, который имеет класс warning.

В качестве альтернативы, если в вашем документе есть только одно окно предупреждения, вы можете определить стили в встроенном атрибуте style: <div style="..."> (заменив ... фактическими правилами CSS).

Предупреждение!

Но слово предостережения. Если вы планируете оформить документ и разместить его на github.com, это не сработает. Хотя анализатор Markdown в GitHub будет работать, как описано выше, GitHub также выполняет некоторую постобработку по соображениям безопасности (как описано в github / markup ). Используемый ими санитарный фильтр удалит все стили (встроенные или нет). В этом случае нет доступных опций. То же самое относится и к StackOverflow.

Answer 2

Как Уэйлан упоминает в своем ответе, Github удаляет скрипт и теги стиля из уценки перед его отображением. Это означает, что единственными возможностями для блоков уведомлений, которые будут отображаться на Github, являются возможности, предоставляемые встроенной уценкой или 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! |
  |---------------|:------------------------|
  

  

• Ящики из таблицы из двух строк:

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