Remark-github-alerts NPM

remark-github-alerts

Ported from antfu/markdown-it-github-alerts
Support GitHub-style alerts for remark
Check out the demo

Usage

Install the package:

ni remark-github-alerts

Add the plugin to your processor:

import remarkGithubAlerts from "remark-github-alerts";

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

Import the styles:

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:

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();