markdown-it-github-alerts
v0.3.0
Published
Support GitHub-style alerts for markdown-it
Downloads
11,736
Maintainers
Readme
markdown-it-github-alerts
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.
> [!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.
Usage
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.
Functionality
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.
Styling
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.
Customization
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.
Sponsors
License
MIT License © 2023-PRESENT Anthony Fu