{"id":28387757,"url":"https://github.com/nylonbricks/remark-blockquote-alerts","last_synced_at":"2026-05-03T07:44:36.417Z","repository":{"id":262781605,"uuid":"888329631","full_name":"nylonbricks/remark-blockquote-alerts","owner":"nylonbricks","description":"💬 Add customizable highlights to Markdown blockquotes with `remark`.","archived":false,"fork":false,"pushed_at":"2024-12-25T18:23:24.000Z","size":321,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-09T18:07:01.711Z","etag":null,"topics":["blockquote","markdown-plugin","remark","remark-blockquote","remark-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/remark-blockquote-alerts","language":"JavaScript","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/nylonbricks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2024-11-14T08:02:22.000Z","updated_at":"2025-04-23T06:20:03.000Z","dependencies_parsed_at":"2025-04-25T13:58:53.956Z","dependency_job_id":"5fbe996d-374f-4546-85b5-85e90034ed0d","html_url":"https://github.com/nylonbricks/remark-blockquote-alerts","commit_stats":null,"previous_names":["nylon-bricks/remark-alerts","nylon-bricks/remark-blockquote-highlights","nylon-bricks/remark-blockquote-alerts","nylonbricks/remark-blockquote-alerts"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/nylonbricks/remark-blockquote-alerts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylonbricks%2Fremark-blockquote-alerts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylonbricks%2Fremark-blockquote-alerts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylonbricks%2Fremark-blockquote-alerts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylonbricks%2Fremark-blockquote-alerts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nylonbricks","download_url":"https://codeload.github.com/nylonbricks/remark-blockquote-alerts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylonbricks%2Fremark-blockquote-alerts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261641278,"owners_count":23188443,"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":["blockquote","markdown-plugin","remark","remark-blockquote","remark-plugin"],"created_at":"2025-05-30T19:10:47.457Z","updated_at":"2026-05-03T07:44:31.396Z","avatar_url":"https://github.com/nylonbricks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remark-blockquote-alerts\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/remark-blockquote-alerts\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/remark-blockquote-alerts\" alt=\"NPM Version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n`remark-blockquote-alerts` extends the functionality of Markdown to enable highlighted blockquotes in environments\nusing `remark`, such as [Gatsby.js](https://gatsbyjs.com/) and similar frameworks. By default, Markdown in these\nenvironments does not support blockquote highlights.\n\nThis package supports [ESM](https://nodejs.org/api/esm.html) and [CommonJS](https://nodejs.org/api/modules.html)\nformats, ensuring compatibility with modern frameworks and Node.js environments.\n\nGitHub introduced this feature in 2022 (see [GitHub Discussions](https://github.com/orgs/community/discussions/16925)),\nand it has since been widely used in many documents. This library allows you to bring similar functionality to your\nMarkdown-based projects.\n\n## How It Works\n\nThis library transforms blockquote prefixes into CSS class formats. For example, a blockquote starting with `[!NOTE]`\nwill be converted to `class=\"blockquote-note\"`. Using CSS, you can style these blockquotes to create elegant components\nlike the example below:\n\n**An example of all five types:**\n\n```markdown\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\n**Here is how they are displayed:**\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/blockquote-sample-dark.png\"\u003e\n  \u003cimg alt=\"Blockquote-Sample\" src=\"./docs/blockquote-sample-light.png\" width=\"560\"\u003e\n\u003c/picture\u003e\n\n## Installation\n\n```bash\nnpm install remark-blockquote-alerts\n```\n\nYou can also install using [pnpm](https://pnpm.io/) or [yarn](https://yarnpkg.com/).\n\n## Usage\n\n### Basic Usage\n\n```typescript\nimport remarkAlerts from 'remark-blockquote-alerts';\n\nconst markdown = '\u003e [!NOTE] Highlights information that users should take into account, even when skimming.';\n\nconst result = remark()\n  .use(remarkAlerts)\n  .use(remarkRehype)\n  .use(rehypeStringify)\n  .processSync(markdown).toString();\n```\n\nThis output will be:\n\n```html\n\n\u003cblockquote class=\"blockquote-note\"\u003e\n  \u003cp\u003eHighlights information that users should take into account, even when skimming.\u003c/p\u003e\n\u003c/blockquote\u003e\n```\n\n### Using with Gatsby.js\n\nTo use `remark-blockquote-alerts` in a `Gatsby.js` project, you can integrate it with `gatsby-plugin-mdx` by\nextending its Remark plugins configuration.\n\n```typescript\n// gatsby-config.js\n\nimport remarkAlerts from 'remark-blockquote-alerts';\n\nconst config: GatsbyConfig = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-mdx',\n      options: {\n        mdxOptions: {\n          remarkPlugins: [remarkAlerts],\n        },\n      },\n    },\n  ],\n};\n```\n\n## Styling\n\nTo apply the default styles shown in the examples, simply import:\n\n```typescript\nimport \"remark-blockquote-alerts/styles/blockquote.min.css\";\n```\n\nIf you'd like to customize the styles, you can copy and modify the file:\n\n```text\nremark-blockquote-alerts/styles/blockquote.css\n```\n\n## Contributing\n\nWe welcome all contributions! You can [open an issue](https://github.com/nylon-bricks/remark-blockquote-alerts/issues)\nto report bugs or suggest features,\nand [submit a pull request](https://github.com/nylon-bricks/remark-blockquote-alerts/pulls) to contribute directly to\nthe codebase.\n\n## License\n\nThis project is distributed under the MIT License. For more information, see the [LICENSE](./LICENSE) file.\n\n## Contact\n\nIf you have any questions, feel free to reach out\nvia [Issues](https://github.com/nylon-bricks/remark-blockquote-alerts/issues) or contact me directly\nat [me@haklee.me](mailto:me@haklee.me).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnylonbricks%2Fremark-blockquote-alerts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnylonbricks%2Fremark-blockquote-alerts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnylonbricks%2Fremark-blockquote-alerts/lists"}