{"id":24056908,"url":"https://github.com/chrisweb/rehype-github-alerts","last_synced_at":"2026-03-03T12:44:06.202Z","repository":{"id":205358215,"uuid":"713071979","full_name":"chrisweb/rehype-github-alerts","owner":"chrisweb","description":"rehype plugin to create alerts (admonitions/callouts) ⚠️, mimicking the way alerts get rendered on github.com","archived":false,"fork":false,"pushed_at":"2025-03-22T12:01:51.000Z","size":774,"stargazers_count":25,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T01:16:06.477Z","etag":null,"topics":["admonitions","alerts","callouts","github","hast","markdown","mdx","rehype","rehype-plugin","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"chrisweb","buy_me_a_coffee":"chriswwweb"}},"created_at":"2023-11-01T19:27:46.000Z","updated_at":"2025-03-22T11:59:10.000Z","dependencies_parsed_at":"2024-05-13T15:49:32.722Z","dependency_job_id":"45501dfc-bd36-4dbf-bbd5-b744a0f3cb0b","html_url":"https://github.com/chrisweb/rehype-github-alerts","commit_stats":null,"previous_names":["chrisweb/rehype-github-alerts"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Frehype-github-alerts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Frehype-github-alerts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Frehype-github-alerts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Frehype-github-alerts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisweb","download_url":"https://codeload.github.com/chrisweb/rehype-github-alerts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349060,"owners_count":21415914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admonitions","alerts","callouts","github","hast","markdown","mdx","rehype","rehype-plugin","typescript"],"created_at":"2025-01-09T05:27:30.037Z","updated_at":"2026-03-03T12:44:06.123Z","avatar_url":"https://github.com/chrisweb.png","language":"TypeScript","readme":"[![npm version](https://img.shields.io/npm/v/rehype-github-alerts.svg?style=flat)](https://www.npmjs.com/package/rehype-github-alerts)\n[![GitHub license](https://img.shields.io/github/license/chrisweb/rehype-github-alerts?style=flat)](https://github.com/chrisweb/rehype-github-alerts/blob/master/LICENSE)\n\n# rehype-github-alerts\n\n## Introduction\n\nrehype plugin to create alerts (admonitions/callouts), mimicking the way alerts get rendered on github.com (based on this [GitHub community \"Alerts\" discussion](https://github.com/orgs/community/discussions/16925)), currently 5 types of alerts are supported:\n\n\u003e [!NOTE]  \n\u003e Highlights information that users should take into account, even when skimming.\n\n\u003e [!TIP]  \n\u003e Optional information to help a user be more successful.\n\n\u003e [!IMPORTANT]  \n\u003e Crucial information necessary for users to succeed.\n\n\u003e [!WARNING]  \n\u003e Critical content demanding immediate user attention due to potential risks.\n\n\u003e [!CAUTION]  \n\u003e Negative potential consequences of an action.\n\nthe markdown syntax for the 5 examples above is as follows:\n\n```md\n\u003e [!NOTE]  \n\u003e Highlights information that users should take into account, even when skimming.\n\n\u003e [!TIP]  \n\u003e Optional information to help a user be more successful.\n\n\u003e [!IMPORTANT]  \n\u003e Crucial information necessary for users to succeed.\n\n\u003e [!WARNING]  \n\u003e Critical content demanding immediate user attention due to potential risks.\n\n\u003e [!CAUTION]  \n\u003e Negative potential consequences of an action.\n```\n\nthis is a zero configuration package as all [options](#options) have defaults, but you can use them if you wish to modify default behavior, like for example by default 5 alerts are defined (with a default icon for each), use `options.alerts` to replace them with your own setup, there is also a default build that will create an HTML 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](#options) to learn more about customization\n\n## installation\n\nTo install rehype-github-alerts:\n\n```shell\nnpm i rehype-github-alerts --save-exact\n```\n\n## examples\n\n### Rehype example\n\nFor a simple example have a look at the [\"rehype example\" README](./examples/simple-rehype-example/README.md) (the source code is located in `examples/simple-rehype-example/`)\n\n### Next.js tutorial\n\nI published a Next.js [Next.js MDX tutorial](https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit) on my blog, the tutorial has a page about [using the **rehype-github-alerts** plugin with **Next.js**](https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/github-like-alerts-plugin)\n\n### Customized plugin Demo\n\nYou can now see a live demo of this plugin on my blog, especially in my web_development [chris.lu/web_development](https://chris.lu/web_development) section, the source code is in the [chris.lu repository](https://github.com/chrisweb/chris.lu), the configuration I used can be found in the next.config.ts file and the styling is in /app/global.css\n\n### How does GitHub render alerts\n\nI created [an issue on github](https://github.com/chrisweb/rehype-github-alerts/issues/1) to check how github is rendering alerts (will add more examples over time, based on feedback)\n\n## styling\n\nIf 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](/dist/styling/css/index.css).\n\nYou can either open the file and copy what you need and paste it into your own CSS file\n\nOr you could import the stylesheet in a Next.js layout file like this:\n\n```js\nimport '@/node_modules/rehype-github-alerts/dist/styling/css/index.css'\n```\n\nThere is an example in the layout file of the [Next.js MDX starterkit](https://github.com/chrisweb/next-js-static-first-mdx-starterkit_tutorial_chris.lu/blob/92500597d8152910aabec0bf9ea56477dca3e1b0/app/layout.tsx) repository\n\nAnother option is to use the [webpack CSS loader](https://www.npmjs.com/package/css-loader) to include the css file into your builds\n\n### icons\n\nIn v4 we switched to using the [GitHub Primer Octicons](https://primer.style/foundations/icons/)\n\nIf you prefer using other icons like the [twbs icons](https://icons.getbootstrap.com/), then have a look at the [v3 icons build](#v3-icons-build) chapter\n\n## options\n\n`options` (optional)\n\nall 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\n\n- `alerts` (`IAlert[]`)\n- `supportLegacy` (`boolean`, default: false)\n- `build` (`DefaultBuildType`)\n\n### build option\n\nthe 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\n\nthe build option accepts a function that has two parameters:\n\nalertOptions: this is an object of type **IAlert**, meaning it contains the options of the alert that got matched, like the keyword, icon and title\noriginalChildren: an array of type **DefaultBuildType**, containing the original children (body content of the alert)\n\nfor example in your configuration file create a rehype-github-alerts **build** option like this:\n\n```mjs\n/**\n * @typedef {import('rehype-github-alerts').IOptions} IOptions\n * @typedef {import('rehype-github-alerts').DefaultBuildType} DefaultBuildType\n */\n\n/** @type { DefaultBuildType } */\nconst myGithubAlertBuild = (alertOptions, originalChildren) =\u003e {\n    const alert = {\n        type: 'element',\n        tagName: 'div',\n        properties: {\n            className: [\n                `markdown-alert-${alertOptions.keyword.toLowerCase()}`,\n            ],\n        },\n        children: [\n            ...originalChildren\n        ],\n    }\n\n    return alert\n}\n\n/** @type { IOptions } */\nconst rehypeGithubAlertsOptions = {\n    build: myGithubAlertBuild,\n}\n```\n\nthen 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](#about-soft-line-breaks-support) for a more detailed explanation):\n\n```md\n\u003e [!NOTE]  \n\u003e I'm a note (created using a custom build)  \n```\n\nwill yield the following HTML output:\n\n```html\n\u003cdiv class=\"markdown-alert-note\"\u003e\n    I'm a note (created using a custom build)\n\u003c/div\u003e\n```\n\n#### v3 icons build\n\nIf you migrate from a previous version to v4 and want to keep the [twbs icons](https://icons.getbootstrap.com/), then you need to update your build (in the plugin options) like this:\n\n```js\nalerts: [\n    {\n        keyword: 'NOTE',\n        // bootstrap icon: info-circle\n        icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\u003e\u003cpath 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\"/\u003e\u003cpath 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\"/\u003e\u003c/svg\u003e',\n        title: 'Note',\n    },\n    {\n        keyword: 'IMPORTANT',\n        // bootstrap icon: exclamation-square\n        icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\u003e\u003cpath 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\"/\u003e\u003cpath 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\"/\u003e\u003c/svg\u003e',\n        title: 'Important',\n    },\n    {\n        keyword: 'WARNING',\n        // bootstrap icon: exclamation-triangle\n        icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\u003e\u003cpath 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\"/\u003e\u003cpath 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\"/\u003e\u003c/svg\u003e',\n        title: 'Warning',\n    },\n    {\n        keyword: 'TIP',\n        // bootstrap icon: lightbulb\n        icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\u003e\u003cpath 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\"/\u003e\u003c/svg\u003e',\n        title: 'Tip',\n    },\n    {\n        keyword: 'CAUTION',\n        // bootstrap icon: exclamation-octagon\n        icon: '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\u003e\u003cpath 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\"/\u003e\u003cpath 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\"/\u003e\u003c/svg\u003e',\n        title: 'Caution',\n    },\n],\n```\n\n\u003e [!TIP]  \n\u003e you are not limited to using the [twbs icons](https://icons.getbootstrap.com/), if you prefer you could use the [lucide icons](https://lucide.dev/packages) or the [Material Symbols icons (google font)](https://fonts.google.com/icons) or the [Font Awesome Free icons](https://github.com/FortAwesome/Font-Awesome)\n\n\n## about \"soft line breaks\" support\n\n\u003e [!IMPORTANT]  \n\u003e GitHub turns soft line breaks into hard line breaks by default, this plugin does NOT  \n\n**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](https://daringfireball.net/projects/markdown/syntax#p), like so:\n\n```md\n\u003e [!NOTE]  \n\u003e you MUST add 2 spaces (to all 3 lines of this example, including the first one) to create line breaks  \n\u003e 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  \n```\n\n**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](https://github.com/remarkjs/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  \n\nAs noted in the readme of the [remark-breaks](https://github.com/remarkjs/remark-breaks) package README, the purpose of the **remark-breaks** is to:\n\n\u003e remark-breaks turns enters into `\u003cbr\u003e`s\n\u003e GitHub does this in a few places (comments, issues, PRs, and releases)\n\n## paragraphs separation\n\nIf in your markdown, you add two spaces at the end of a line, like this:\n\n```md\n\u003e [!TIP]  \n\u003e first paragraph  \n\u003e second paragraph  \n```\n\nThen the resulting HTML will only have **one paragraph**, in which both parts of your text are separated by a `\u003cbr\u003e` element:\n\n```html\n\u003cdiv class=\"markdown-alert markdown-alert-tip\"\u003e\n    \u003cp class=\"markdown-alert-title\"\u003e(...)\u003c/p\u003e\n    \u003cp\u003efirst paragraph\u003cbr\u003e\n    second paragraph\u003c/p\u003e\n\u003c/div\u003e\n```\n\nTo create **two separate paragraphs** (no matter if you are using remark-breaks or not) you need to add an empty line into your markdown (same as you would do outside of a blockquote), like so:\n\n```md\n\u003e [!TIP]  \n\u003e first paragraph  \n\u003e\n\u003e second paragraph  \n```\n\nWhich will result in the following HTML:\n\n```html\n\u003cdiv class=\"markdown-alert markdown-alert-tip\"\u003e\n    \u003cp class=\"markdown-alert-title\"\u003e(...)\u003c/p\u003e\n    \u003cp\u003efirst paragraph\u003c/p\u003e\n    \u003cp\u003esecond paragraph\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## tests\n\nFor our tests we use the [test-runner that is built in node.js](https://nodejs.org/api/test.html)\n\nAll tests are located in the `/test` directory\n\n### run tests\n\nTo run the tests use the following command:\n\n```shell\nnpm run test\n```\n\n\u003e [!NOTE]  \n\u003e this will build the plugin and then run the test coverage command  \n\n### github token to create new test fixtures\n\nTo create new fixtures, we use a the [create-gfm-fixtures](https://github.com/wooorm/create-gfm-fixtures) package, to be able to use this package locally you will need a **personal GitHub access token**, because the tool will create gists on GitHub, insert the markdown from the test into the gist file, then the tool will read the converted HTML from GitHub and finally create a fixture HTML file. The fixture HTML file can then be used to compare the fixture HTML with the HTML output that gets created by this plugin. If the HTML from GitHub and the HTML produced by this plugin match then the test will pass, else it will fail.\n\nTo create a new token visit the GitHub [\"New fine-grained personal access token\"](https://github.com/settings/personal-access-tokens/new) page. There you need to create a new token, then under **Permissions** you need to set the **Gists** permission to read/write, then click on **Generate token** to create your new token.  \n\nWhen you have your token, make a copy of the `.env.example` and rename it to `.env`, then insert your token and save it\n\n\u003e [!TIP]  \n\u003e  if you new to GitHub tokens, then you may want to check out the [GitHub documentation \"Creating a fine-grained personal access token\"](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token)\n\n## types\n\nIf 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:\n\n```ts\nimport { rehypeGithubAlerts, IOptions } from 'rehype-github-alerts'\n\nconst myOptions: IOptions = {\n    alerts: [\n        {\n            keyword: 'MY_ALERT',\n            icon: '\u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"/\u003e\u003c/svg\u003e',\n            title: 'My Alert',\n        },\n    ],\n}\n```\n\nIf your configuration file is written in javascript, then you can use the types likes this:\n\non top of your file add this jsdoc **typedef** at the beginning of the file:\n\n```js\n/**\n * @typedef {import('rehype-github-alerts').IOptions} IOptions\n */\n```\n\nand then in your code use the rehype-github-alerts type by placing a jsdoc @type tag over the options, like so:\n\n```js\n/** @type { IOptions } */\nconst rehypeGithubAlertsOptions = {\n    supportLegacy: false,\n}\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003ehere is a full example of a next.js next.config.mjs configuration file\u003c/summary\u003e\n\n```mjs\n/**\n * @typedef {import('rehype-github-alerts').IOptions} IOptions\n */\n\nimport WithMDX from '@next/mdx'\nimport remarkBreaks from 'remark-breaks'\nimport remarkGfm from 'remark-gfm'\nimport { rehypeGithubAlerts }  from 'rehype-github-alerts'\n\nconst nextConfig = (/*phase*/) =\u003e {\n\n    // https://github.com/remarkjs/remark-gfm\n    // If you use remark-gfm, you'll need to use next.config.mjs\n    // as the package is ESM only\n    const remarkGfmOptions = {\n        singleTilde: false,\n    }\n\n    // https://github.com/chrisweb/rehype-github-alerts\n    /** @type { IOptions } */\n    const rehypeGithubAlertsOptions = {\n        supportLegacy: false,\n    }\n\n    const withMDX = WithMDX({\n        extension: /\\.mdx?$/,\n        options: {\n            remarkPlugins: [remarkBreaks, [remarkGfm, remarkGfmOptions]],\n            rehypePlugins: [[rehypeGithubAlerts, rehypeGithubAlertsOptions]],\n        },\n    })\n\n    /** @type {import('next').NextConfig} */\n    const nextConfig = {\n        experimental: {\n            // experimental use rust compiler for MDX\n            // as of now (07.10.2023) there is no support for rehype plugins\n            // this is why it is currently disabled\n            mdxRs: false,\n        },\n        // configure pageExtensions to include md and mdx\n        pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],\n    }\n\n    return withMDX(nextConfig)\n\n}\n\nexport default nextConfig\n```\n\nThe Next.js configuration example above assumes that you have installed the packages [@next/mdx](https://www.npmjs.com/package/@next/mdx), [@mdx-js/loader](https://www.npmjs.com/package/@mdx-js/loader), [remark-breaks](https://www.npmjs.com/package/remark-breaks), [remark-gfm](https://www.npmjs.com/package/remark-gfm) and [rehype-github-alerts](https://www.npmjs.com/package/rehype-github-alerts)\n\n\u003c/details\u003e\n\n## legacy syntax\n\nas 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\n\nlegacy markdown (mdx) syntax:\n\n```md\n\u003e **!Note**  \n\u003e I'm a note :wave:  \n\n\u003e **!Important**  \n\u003e I'm important  \n\n\u003e **!Warning**  \n\u003e I'm a warning  \n```\n\nyou can turn **ON** legacy support via the options like so:\n\n```js\nconst myRehypeGithubAlertsOptions = {\n    supportLegacy: true,\n}\n```\n\n## bug reports / issues\n\nif you find a bug, please open an issue in the [rehype-github-alerts issues page on github](https://github.com/chrisweb/rehype-github-alerts/issues), 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\n\n## feedback / ideas\n\nIf you have an idea to improve this project please use the [\"NEW Feature Request\"](https://github.com/chrisweb/rehype-github-alerts/issues/new/choose) issue template or if you have any feedback about this package you may want to post it in the [rehype discussion about this plugin](https://github.com/orgs/rehypejs/discussions/157)\n\n## contributing\n\nPRs are always welcome 😉\n\nTo get started, please check out the [CONTRIBUTING.md](CONTRIBUTING.md) guide of this project\n\n## alternatives\n\n* One 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](https://www.npmjs.com/package/remark-github-beta-blockquote-admonitions)  \n* Another alternative is to use the [rehype-github-alert](https://www.npmjs.com/package/rehype-github-alert) (the name is similar to this plugin but minus the \"s\"), it is the official package from the [rehype-github](https://github.com/rehypejs/rehype-github) repository  \n* A different approach is being used in [rehype-callouts](https://github.com/lin-stephanie/rehype-callouts), which is NOT about mimicking GitHub (even though the blockquote usage is similar) but the package has nice features like nestable callouts and also custom callout titles  \n\n## additional packages\n\nif you use this package, there are other packages you might want to install too, for example:\n\n- [remark-gfm](https://github.com/remarkjs/remark-gfm), adds support for [GitHub Flavored Markdown (GFM)](https://github.github.com/gfm/) (autolink literals, footnotes, strikethrough, tables, task lists)\n- [remark-breaks](https://github.com/remarkjs/remark-breaks), turns soft line endings (enters) into hard breaks (`\u003cbr\u003e`s). GitHub does this in a few places (comments, issues, PRs, and releases)\n","funding_links":["https://github.com/sponsors/chrisweb","https://buymeacoffee.com/chriswwweb"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Frehype-github-alerts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisweb%2Frehype-github-alerts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Frehype-github-alerts/lists"}