Add support for `[!TIP]` and `[!CAUTION]`

[j-murata]

• Extension Name: marked-alert
• Extension Version: 1.2.1

Use case

https://github.com/orgs/community/discussions/16925

Proposal

GitHub seems to have added support for rendering [!TIP] and [!CAUTION]. It would be greatly appreciated if marked-alert could follow suit.

[bent10]

I've released marked-alert@2.0.0 to support the current spec. Feel free to explore and let me know if you have any feedback.

[j-murata]

Hi @bent10

Hmm, I am using marked-alert to convert to pdfs with md-to-pdf, and on v2.0.1, the color of the icon and the strings to the right of it, such as Note and Important, seems to be incorrect.

But I'm sorry, I don't know which library is responsible for this problem.

[j-murata]

The problem above may be due to the outdated CSS file I am specifying as the base (I am specifying v5.4.0 which is available here).

[bent10]

For v5.4.0, you need to include the following CSS:

.markdown-body .markdown-alert.markdown-alert-tip {
  border-left-color: #57ab5a;
}

.markdown-body .markdown-alert.markdown-alert-caution {
  border-left-color: #e5534b;
}

.markdown-body .markdown-alert > .markdown-alert-title {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.markdown-alert-note > .markdown-alert-title {
  color: #539bf5;
}

.markdown-alert-tip > .markdown-alert-title {
  color: #57ab5a;
}

.markdown-alert-important > .markdown-alert-title {
  color: #986ee2;
}

.markdown-alert-warning > .markdown-alert-title {
  color: #c69026;
}

.markdown-alert-caution > .markdown-alert-title {
  color: #e5534b;
}

.mr-2 {
  margin-right: 0.5rem;
}

[j-murata]

@bent10 Thanks for the correct CSS Style info! I will also ask the auther of the github-markdown-css repo if he can update it.