Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyoban/remark-github-alerts
Support GitHub-style alerts for remark
https://github.com/hyoban/remark-github-alerts
github-flavored-markdown markdown nextra remark
Last synced: 3 days ago
JSON representation
Support GitHub-style alerts for remark
- Host: GitHub
- URL: https://github.com/hyoban/remark-github-alerts
- Owner: hyoban
- License: mit
- Created: 2023-12-01T08:22:55.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-15T08:28:03.000Z (8 months ago)
- Last Synced: 2024-09-19T09:39:36.789Z (about 2 months ago)
- Topics: github-flavored-markdown, markdown, nextra, remark
- Language: HTML
- Homepage: https://remark-github-alerts.vercel.app
- Size: 604 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
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)
[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