remark-github-alerts

1. Ported from antfu/markdown-it-github-alerts
2. Support GitHub-style alerts for remark
3. 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();

Check Also

• GitHub-style alerts
• markdown-it-github-alerts
• vscode-markdown-alert
• remark-github-alerts