Support GitHub-style alerts for markdown-it.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

npm i markdown-it-github-alerts

import MarkdownIt from 'markdown-it'
import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'

const md = MarkdownIt()

md.use(MarkdownItGitHubAlerts, /* Options */)

const html = md.render(/* ... */)

For the options available, please refer to the jsdoc.

This plugin transforms the following markdown:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

to the following HTML:

<div class="markdown-alert markdown-alert-note">
  <p class="markdown-alert-title" dir="auto"><!-- svg icon-->Note</p><p>
  Highlights information that users should take into account, even when skimming.</p>
</div>

Which is compatible with the GitHub's output.

You can write your custom styles for your alerts.

We also provide some CSS extracted from GitHub's styles for you to use.

import 'markdown-it-github-alerts/styles/github-colors-light.css'
import 'markdown-it-github-alerts/styles/github-colors-dark-media.css'
import 'markdown-it-github-alerts/styles/github-base.css'

You might change github-colors-dark-media.css to github-colors-dark-class.css if you are using class-based (.dark) dark mode.

Refer to the source code for more details.

In order to also support Obsidian callouts syntax it is possible to allow any type of markers with the following setting:

md.use(MarkdownItGitHubAlerts, {
  markers: '*'
})

Alternative titles are also supported, by appending it to the marker like this:

> [!note] Nota bene
> The custom title will replace the regular title.

MIT License © 2023-PRESENT Anthony Fu