rehype plugin to create alerts (admonitions/callouts), mimicking the way alerts get rendered on github.com (based on this GitHub community "Alerts" discussion), currently 5 types of alerts are supported:
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.
the markdown syntax for the 5 examples above is as follows:
> [!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.this is a zero configuration package as all options have defaults, but you can use them if you wish to modify default behavior, like for example by default 3 alerts are defined (with a default icon), use options.alerts to replace them with your own setup, there is also a default build that will create an output that mimics what GitHub does, but you can change the build to create whatever HTML suits your needs best, check out the "options" chapter to learn more about customization
Note
The GitHub Primer Octicons are an external dependency that is optional (as well as the octicons types).
To install rehype-github-alerts and also the octicons, use the following command:
npm i rehype-github-alerts@latest @primer/octicons@latest --save-exactFor a simple example have a look at the "rehype example" README (the source code is located in examples/simple-rehype-example/)
I published a Next.js Next.js MDX tutorial on my blog, the tutorial has a page about using the rehype-github-alerts plugin with Next.js
You can now see a live demo of this plugin on my blog, especially in my web_development chris.lu/web_development section, the source code is in the chris.lu repository, the configuration I used can be found in the next.config.ts file and the styling is in /app/global.css
I created an issue on github to check how github is rendering alerts (will add more examples over time, based on feedback)
If you want to add styling / CSS similar to what GitHub uses, then you can get started by using the stylesheet that is included in the build of this package. The stylesheet is in dist/styling/css/index.css.
You can either open the file and copy what you need and paste it into your own CSS file
Or you could import the stylesheet in a Next.js layout file like this:
import '@/node_modules/rehype-github-alerts/dist/styling/css/index.css'There is an example in the layout file of the Next.js MDX starterkit repository
Another option is to use the webpack CSS loader to include the css file into your builds
In v4 we switched to using the GitHub Primer Octicons
If you prefer using other icons like the twbs icons, then have a look at the v3 icons build chapter
options (optional)
all options have default values which for most use cases should be enough, meaning there is zero configuration to do, unless you want to customize something
alerts(IAlert[])supportLegacy(boolean, default: true)build(DefaultBuildType)
the build option can be used to customize how alerts get rendered, this can be useful if you want to modify what css classes the elements have
the build option accepts a function that has two parameters:
alertOptions: this is an object of type IAlert, meaning it contains the options of the alert that got matched, like the keyword, icon and title originalChildren: an array of type DefaultBuildType, containing the original children (body content of the alert)
for example in your configuration file create a rehype-github-alerts build option like this:
/**
* @typedef {import('rehype-github-alerts').IOptions} IOptions
* @typedef {import('rehype-github-alerts').DefaultBuildType} DefaultBuildType
*/
/** @type { DefaultBuildType } */
const myGithubAlertBuild = (alertOptions, originalChildren) => {
const alert = {
type: 'element',
tagName: 'div',
properties: {
className: [
`markdown-alert-${alertOptions.keyword.toLowerCase()}`,
],
},
children: [
...originalChildren
],
}
return alert
}
/** @type { IOptions } */
const rehypeGithubAlertsOptions = {
build: myGithubAlertBuild,
}then use the following markdown code (important: there are two spaces after [!NOTE] to create a hard line break, see the "about soft line breaks" chapter for a more detailed explanation):
> [!NOTE]
> I'm a note (created using a custom build) will yield the following HTML output:
<div class="markdown-alert-note">
I'm a note (created using a custom build)
</div>If you migrate from a previous version to v4 and want to keep the twbs icons, then you need to update your build (in the plugin options) like this:
alerts: [
{
keyword: 'NOTE',
// bootstrap icon: info-circle
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>',
title: 'Note',
},
{
keyword: 'IMPORTANT',
// bootstrap icon: exclamation-square
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>',
title: 'Important',
},
{
keyword: 'WARNING',
// bootstrap icon: exclamation-triangle
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>',
title: 'Warning',
},
{
keyword: 'TIP',
// bootstrap icon: lightbulb
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/></svg>',
title: 'Tip',
},
{
keyword: 'CAUTION',
// bootstrap icon: exclamation-octagon
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>',
title: 'Caution',
},
],Important
GitHub turns soft line breaks into hard line breaks by default, this plugin does NOT
option 1: If you are using rehype-github-alerts, then you need to add two spaces at the end of each line if you want to have a line break (same as you would do for markdown outside of an alert), which is the markdown syntax for a hard linebreak, like so:
> [!NOTE]
> you MUST add 2 spaces (to all 3 lines of this example, including the first one) to create line breaks
> if you don't want to manually add two spaces after each line, then you need to install the [remark-breaks](https://github.com/remarkjs/remark-breaks) plugin option 2: If you do NOT want to have to add two spaces manually after each line, then I recommend you install the plugin called remark-breaks, remark-breaks will mimic the behavior you experience on GitHub, by automatically turning a soft line break (when you hit Enter at the end of a line) into hard line breaks
As noted in the readme of the remark-breaks package README, the purpose of the remark-breaks is to:
remark-breaks turns enters into
<br>s GitHub does this in a few places (comments, issues, PRs, and releases)
If you don't want a new line (1 <br> element) but also some space between two paragraphs (2 <br> elements), no matter if you have remark-breaks installed or not, then you need to add an empty line (same as you would do outside of a blockquote), like so:
> [!TIP]
> first paragraph
>
> second paragraph I used the test-runner that built in node.js to add some test for common cases
All tests are located in the /test directory
To use the tests you need to create a personal GitHub access token, visit your github "New fine-grained personal access token" page to create a new token, you need to set the Gists permission under Account permissions to read/write, then click on "Generate token" to create your new token. If you new to GitHub tokens, then you may want to check out the GitHub documentation "Creating a fine-grained personal access token", this token will be used by one of the dependencies of the test suite to create gists based on input markdown and generate HTML files containing the output GitHub has produced, for more about this package check out it's the "create-gfm-fixtures" GitHub repository
When you have your token, make a copy of the .env.example and rename it to .env, then insert your token and save it
To run the tests use the following command:
npm run testNote
this will build the plugin and then run the test coverage command
If you use typescript and intend to edit the options, for example to create custom alerts, then you may want to use the types provided by this library:
import { rehypeGithubAlerts, IOptions } from 'rehype-github-alerts'
const myOptions: IOptions = {
alerts: [
{
keyword: 'MY_ALERT',
icon: '<svg width="16" height="16" viewBox="0 0 16 16"/></svg>',
title: 'My Alert',
},
],
}If your configuration file is written in javascript, then you can use the types likes this:
on top of your file add this jsdoc typedef at the beginning of the file:
/**
* @typedef {import('rehype-github-alerts').IOptions} IOptions
*/and then in your code use the rehype-github-alerts type by placing a jsdoc @type tag over the options, like so:
/** @type { IOptions } */
const rehypeGithubAlertsOptions = {
supportLegacy: false,
}here is a full example of a next.js next.config.mjs configuration file
/**
* @typedef {import('rehype-github-alerts').IOptions} IOptions
*/
import WithMDX from '@next/mdx'
import remarkBreaks from 'remark-breaks'
import remarkGfm from 'remark-gfm'
import { rehypeGithubAlerts } from 'rehype-github-alerts'
const nextConfig = (/*phase*/) => {
// https://github.com/remarkjs/remark-gfm
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
const remarkGfmOptions = {
singleTilde: false,
}
// https://github.com/chrisweb/rehype-github-alerts
/** @type { IOptions } */
const rehypeGithubAlertsOptions = {
supportLegacy: false,
}
const withMDX = WithMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkBreaks, [remarkGfm, remarkGfmOptions]],
rehypePlugins: [[rehypeGithubAlerts, rehypeGithubAlertsOptions]],
},
})
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
// experimental use rust compiler for MDX
// as of now (07.10.2023) there is no support for rehype plugins
// this is why it is currently disabled
mdxRs: false,
},
// configure pageExtensions to include md and mdx
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
}
return withMDX(nextConfig)
}
export default nextConfigThe Next.js configuration example above assumes that you have installed the packages @next/mdx, @mdx-js/loader, remark-breaks, remark-gfm and rehype-github-alerts
as of 14 November 2023 GitHub has removed support for legacy syntax, the legacy syntax is supported by this plugin but as of now turned off by default
legacy markdown (mdx) syntax:
> **!Note**
> I'm a note :wave:
> **!Important**
> I'm important
> **!Warning**
> I'm a warning you can turn ON legacy support via the options like so:
const myRehypeGithubAlertsOptions = {
supportLegacy: true,
}- write more tests to reach a test coverage of 100%
if you find a bug, please open an issue in the rehype-github-alerts issues page on github, try to describe the bug you encountered as best as you can and if possible add some examples of the markdown / mdx content or code that you used when you found the bug, I or a contributor will try to look into it asap
If you have an idea to improve this project please use the "NEW Feature Request" issue template or if you have any feedback about this package you may want to post it in the rehype discussion about this plugin
PRs are welcome 😉
To get started, please check out the CONTRIBUTING.md guide of this project
an alternative to this package if you want to have github like alerts but do it with a remark plugin instead of a rehype plugin is remark-github-beta-blockquote-admonitions
if you use this package, there are other packages you might want to install too, for example:
- remark-gfm, adds support for GitHub Flavored Markdown (GFM) (autolink literals, footnotes, strikethrough, tables, task lists)
- remark-breaks, turns soft line endings (enters) into hard breaks (
<br>s). GitHub does this in a few places (comments, issues, PRs, and releases)
the 5 icons used in this package are from "Bootstrap Icons" repository and licensed under MIT
Have downgraded eslint for now, ESLint issue #19134 explains the problem and there is a PR #10339 getting merged anytime soon
