# remark-github-alerts

> Support GitHub-style alerts for remark

Latest version **0.1.1** (published 2025-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-github-alerts
pnpm add remark-github-alerts
yarn add remark-github-alerts
bun add remark-github-alerts
```

## Health

**Score 45/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2025-03-21 |
| First published | 2023-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 20 |
| Author | Stephen Zhou |
| Maintainers | hyoban |
| Keywords | remark |

## Links

- npm: https://www.npmjs.com/package/remark-github-alerts
- Repository: https://github.com/hyoban/remark-github-alerts
- Homepage: https://github.com/hyoban/remark-github-alerts#readme
- Issues: https://github.com/hyoban/remark-github-alerts/issues
- npm.io page: https://npm.io/package/remark-github-alerts

## Dependencies (1)

- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2025-03-21
- 0.1.0 — 2024-10-26
- 0.1.0-beta.3 — 2024-03-15
- 0.1.0-beta.2 — 2024-03-14
- 0.1.0-beta.1 — 2024-03-14
- 0.0.4 — 2023-12-03
- 0.0.3 — 2023-12-01
- 0.0.2 — 2023-12-01
- 0.0.1 — 2023-12-01

## README

# remark-github-alerts

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]

1. Ported from [antfu/markdown-it-github-alerts](https://github.com/antfu/markdown-it-github-alerts)
1. Support GitHub-style alerts for remark
1. Check out the [demo](https://remark-github-alerts.vercel.app)

## Usage

Install the package:

```sh
ni remark-github-alerts
```

Add the plugin to your `processor`:

```ts
import remarkGithubAlerts from "remark-github-alerts";

const processor = unified()
  .use(remarkParse)
  .use(remarkGithubAlerts)
  .use(remarkRehype)
  .use(rehypeStringify);
```

Import the styles:

```ts
import "remark-github-alerts/styles/github-colors-light.css";
import "remark-github-alerts/styles/github-colors-dark-class.css";
// or
// import "remark-github-alerts/styles/github-colors-dark-media.css"
import "remark-github-alerts/styles/github-base.css";
```

If you are using Nextra, you can add the plugin to your `next.config.mjs`:

```ts
import nextra from "nextra";
import remarkGithubAlerts from "remark-github-alerts";

const withNextra = nextra({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
  mdxOptions: {
    remarkPlugins: [remarkGithubAlerts],
  },
});

export default withNextra();
```

## Check Also

- [GitHub-style alerts](https://github.com/orgs/community/discussions/16925)
- [markdown-it-github-alerts](https://github.com/antfu/markdown-it-github-alerts)
- [vscode-markdown-alert](https://github.com/KeJunMao/vscode-markdown-alert)
- [remark-github-alerts](https://github.com/qhanw/remark-gh-alerts)

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/remark-github-alerts?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/remark-github-alerts
[npm-downloads-src]: https://img.shields.io/npm/dm/remark-github-alerts?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/remark-github-alerts
[bundle-src]: https://img.shields.io/bundlephobia/minzip/remark-github-alerts?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=remark-github-alerts
[license-src]: https://img.shields.io/github/license/hyoban/remark-github-alerts.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/hyoban/remark-github-alerts/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/remark-github-alerts

---
_Source: https://npm.io/package/remark-github-alerts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._