{"id":15777234,"url":"https://github.com/jaywcjlove/remark-github-blockquote-alert","last_synced_at":"2025-04-15T21:06:42.318Z","repository":{"id":227810918,"uuid":"772418841","full_name":"jaywcjlove/remark-github-blockquote-alert","owner":"jaywcjlove","description":"Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.","archived":false,"fork":false,"pushed_at":"2024-06-23T06:09:15.000Z","size":94,"stargazers_count":12,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T21:33:27.475Z","etag":null,"topics":["alerts","github","github-alerts","markdown","remark","remark-plugin"],"latest_commit_sha":null,"homepage":"https://wangchujiang.com/remark-github-blockquote-alert/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaywcjlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2024-03-15T06:39:45.000Z","updated_at":"2024-10-26T08:20:37.000Z","dependencies_parsed_at":"2024-03-15T09:20:35.157Z","dependency_job_id":"675a0903-0ba6-4f0d-b5f8-8f4ac8c786de","html_url":"https://github.com/jaywcjlove/remark-github-blockquote-alert","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"e9c3ca4b581f743bc0832f3a7425749a19262f2c"},"previous_names":["jaywcjlove/remark-github-alert"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fremark-github-blockquote-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fremark-github-blockquote-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fremark-github-blockquote-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fremark-github-blockquote-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/remark-github-blockquote-alert/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224737441,"owners_count":17361344,"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":["alerts","github","github-alerts","markdown","remark","remark-plugin"],"created_at":"2024-10-04T17:43:18.071Z","updated_at":"2024-11-16T15:02:50.134Z","avatar_url":"https://github.com/jaywcjlove.png","language":"TypeScript","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":[],"sub_categories":[],"readme":"remark-github-blockquote-alert\n===\n\u003c!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;--\u003e\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) \n[![Downloads](https://img.shields.io/npm/dm/remark-github-blockquote-alert.svg?style=flat)](https://www.npmjs.com/package/remark-github-blockquote-alert)\n[![NPM version](https://img.shields.io/npm/v/remark-github-blockquote-alert.svg?style=flat)](https://npmjs.org/package/remark-github-blockquote-alert)\n[![CI](https://github.com/jaywcjlove/remark-github-blockquote-alert/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/remark-github-blockquote-alert/actions/workflows/ci.yml)\n[![Coverage Status](https://jaywcjlove.github.io/remark-github-blockquote-alert/badges.svg)](https://jaywcjlove.github.io/remark-github-blockquote-alert/lcov-report/)\n[![Repo Dependents](https://badgen.net/github/dependents-repo/jaywcjlove/remark-github-blockquote-alert)](https://github.com/jaywcjlove/remark-github-blockquote-alert/network/dependents)\n\nRemark plugin to add support for [GitHub Alert](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)\n\n![](https://docs.github.com/assets/cb-50447/mw-1440/images/help/writing/alerts-rendered.webp)\n\nAlerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.\n\n## Installation\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be `import` instead of `require`.\n\n```bash\nnpm install remark-github-blockquote-alert\n```\n\n## Usage\n\n```js\nimport { remarkAlert } from 'remark-github-blockquote-alert'\n\nlet markdown = `# Alert \\n\u003e [!NOTE] \\n\u003e test`;\nconst htmlStr = remark()\n    .use(remarkParse)\n    .use(remarkAlert)\n    .use(remarkRehype)\n    .use(rehypeStringify)\n    .processSync(markdown).toString()\n```\n\nThe output HTML will be:\n\n```html\n\u003ch1\u003eAlert\u003c/h1\u003e\n\u003cdiv class=\"markdown-alert markdown-alert-note\" dir=\"auto\"\u003e\n\u003cp class=\"markdown-alert-title\" dir=\"auto\"\u003e\u003csvg class=\"octicon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\u003c/svg\u003eNOTE\u003c/p\u003e\n\u003cp\u003eUseful information that users should know, even when skimming content.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Modify the title\n\nChange the expression `[!NOTE]` to `[!NOTE/笔记]`\n\n```js\nlet markdown = `# Alert \\n\u003e [!NOTE/笔记] \\n\u003e test`;\n\nconst htmlStr = remark()\n    .use(remarkParse)\n    .use(remarkAlert, { legacyTitle: true })\n    .use(remarkRehype)\n    .use(rehypeStringify)\n    .processSync(markdown).toString()\n```\n\nThe output HTML will be:\n\n```html\n\u003ch1\u003e笔记\u003c/h1\u003e\n\u003cdiv class=\"markdown-alert markdown-alert-note\" dir=\"auto\"\u003e\n\u003cp class=\"markdown-alert-title\" dir=\"auto\"\u003e\u003csvg class=\"octicon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\u003c/svg\u003eNOTE\u003c/p\u003e\n\u003cp\u003eUseful information that users should know, even when skimming content.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Wrap tag name with container\n\n```js\nlet markdown = `\u003e [!CAUTION] \\n\u003e Hello World`;\nconst htmlStr = remark()\n  .use(remarkParse)\n  .use(remarkAlert, { tagName: \"blockquote\" })\n  .use(remarkRehype)\n  .use(rehypeStringify)\n  .processSync(markdown).toString()\n```\n\nThe output HTML will be:\n\n```html\n\u003cblockquote class=\"markdown-alert markdown-alert-caution\" dir=\"auto\"\u003e\n\u003cp class=\"markdown-alert-title\" dir=\"auto\"\u003e\u003csvg class=\"octicon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\u003c/svg\u003eCAUTION\u003c/p\u003e\n\u003cp\u003eHello World\u003c/p\u003e\n\u003c/blockquote\u003e\n```\n\n## Styling\n\nYou can mimic GitHub's alert style by adding the styles provided in the npm package to your CSS.\n\n```js\nimport 'remark-github-blockquote-alert/alert.css'\n```\n\nOr, add the following styles to your CSS to mimic GitHub's alert style:\n\n```css\n@media (prefers-color-scheme: dark) {\n  .markdown-alert {\n    --color-border-default: #30363d;\n    --color-accent-fg: #58a6ff;\n    --color-accent-emphasis: #1f6feb;\n    --color-danger-fg: #f85149;\n    --color-danger-emphasis: #da3633;\n    --color-attention-fg: #d29922;\n    --color-attention-emphasis: #9e6a03;\n    --color-done-fg: #a371f7;\n    --color-done-emphasis: #8957e5;\n    --color-success-fg: #3fb950;\n    --color-success-emphasis: #238636;\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  .markdown-alert {\n    --color-border-default: #d0d7de;\n    --color-accent-fg: #0969da;\n    --color-accent-emphasis: #0969da;\n    --color-danger-fg: #d1242f;\n    --color-danger-emphasis: #cf222e;\n    --color-attention-fg: #9a6700;\n    --color-attention-emphasis: #9a6700;\n    --color-done-fg: #8250df;\n    --color-done-emphasis: #8250df;\n    --color-success-fg: #1a7f37;\n    --color-success-emphasis: #1f883d;\n  }\n}\n\n.markdown-alert {\n  border-left: .25em solid var(--borderColor-default, var(--color-border-default));\n  color: inherit;\n  margin-bottom: 16px;\n  padding: .5rem 1em\n}\n.markdown-alert\u003e:last-child {\n  margin-bottom: 0!important\n}\n.markdown-alert .markdown-alert-title {\n  align-items: center;\n  display: flex;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1\n}\n.markdown-alert .markdown-alert-title svg.octicon {\n  margin-right: 8px!important;\n  margin-right: var(--base-size-8,8px) !important;\n  fill: currentColor;\n}\n.markdown-alert.markdown-alert-note {\n  border-left-color: var(--borderColor-accent-emphasis,var(--color-accent-emphasis))\n}\n.markdown-alert.markdown-alert-note .markdown-alert-title {\n  color: var(--color-accent-fg);\n  color: var(--fgColor-accent,var(--color-accent-fg))\n}\n.markdown-alert.markdown-alert-tip {\n  border-left-color: var(--borderColor-success-emphasis,var(--color-success-emphasis))\n}\n.markdown-alert.markdown-alert-tip .markdown-alert-title {\n  color: var(--color-success-fg);\n  color: var(--fgColor-success,var(--color-success-fg))\n}\n.markdown-alert.markdown-alert-important {\n  border-left-color: var(--borderColor-done-emphasis,var(--color-done-emphasis))\n}\n.markdown-alert.markdown-alert-important .markdown-alert-title {\n  color: var(--color-done-fg);\n  color: var(--fgColor-done,var(--color-done-fg))\n}\n.markdown-alert.markdown-alert-warning {\n  border-left-color: var(--borderColor-attention-emphasis,var(--color-attention-emphasis))\n}\n.markdown-alert.markdown-alert-warning .markdown-alert-title {\n  color: var(--color-attention-fg);\n  color: var(--fgColor-attention,var(--color-attention-fg))\n}\n.markdown-alert.markdown-alert-caution {\n  border-left-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis))\n}\n.markdown-alert.markdown-alert-caution .markdown-alert-title {\n  color: var(--color-danger-fg);\n  color: var(--fgColor-danger,var(--color-danger-fg))\n}\n```\n\n## Currently 5 types of alerts are supported:\n\nTo add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. Five types of alerts are available:\n\n```markdown\n\u003e [!NOTE]\n\u003e Useful information that users should know, even when skimming content.\n\n\u003e [!TIP]\n\u003e Helpful advice for doing things better or more easily.\n\n\u003e [!IMPORTANT]\n\u003e Key information users need to know to achieve their goal.\n\n\u003e [!WARNING]\n\u003e Urgent info that needs immediate user attention to avoid problems.\n\n\u003e [!CAUTION]\n\u003e Advises about risks or negative outcomes of certain actions.\n```\n\nHere are the rendered alerts:\n\n![](https://docs.github.com/assets/cb-50447/mw-1440/images/help/writing/alerts-rendered.webp)\n\n\u003e [!NOTE]  \n\u003e Useful information that users should know, even when skimming content.\n\n\u003e [!TIP]  \n\u003e Helpful advice for doing things better or more easily.\n\n\u003e [!IMPORTANT]  \n\u003e Key information users need to know to achieve their goal.\n\n\u003e [!WARNING]  \n\u003e Urgent info that needs immediate user attention to avoid problems.\n\n\u003e [!CAUTION]  \n\u003e Advises about risks or negative outcomes of certain actions.\n\n## Related\n\n- [`rehype-rewrite`](https://github.com/jaywcjlove/rehype-rewrite) Rewrite element with rehype.\n- [`rehype-video`](https://github.com/jaywcjlove/rehype-video) Add improved video syntax: links to `.mp4` and `.mov` turn into videos.\n- [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) New syntax to add attributes to Markdown.\n- [`rehype-ignore`](https://github.com/jaywcjlove/rehype-ignore) Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/jaywcjlove/remark-github-blockquote-alert/graphs/contributors\"\u003e\n  \u003cimg src=\"https://jaywcjlove.github.io/remark-github-blockquote-alert/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nMIT © [Kenny Wong](https://github.com/jaywcjlove)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fremark-github-blockquote-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2Fremark-github-blockquote-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fremark-github-blockquote-alert/lists"}