{"id":15017094,"url":"https://github.com/lin-stephanie/rehype-callouts","last_synced_at":"2025-04-12T11:41:14.009Z","repository":{"id":249243952,"uuid":"827854770","full_name":"lin-stephanie/rehype-callouts","owner":"lin-stephanie","description":"Render blockquote-based callouts (admonitions/alerts).","archived":false,"fork":false,"pushed_at":"2025-04-09T14:02:10.000Z","size":1888,"stargazers_count":24,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T15:21:04.113Z","etag":null,"topics":["admonitions","alerts","astro","callouts","markdow","obsidian","rehype-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rehype-callouts","language":"TypeScript","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/lin-stephanie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"lin-stephanie"}},"created_at":"2024-07-12T14:19:54.000Z","updated_at":"2025-04-09T14:00:43.000Z","dependencies_parsed_at":"2024-07-19T15:41:05.794Z","dependency_job_id":"019c3de3-7f4f-42a0-af01-e5ee134a9cbe","html_url":"https://github.com/lin-stephanie/rehype-callouts","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"a48cda574d01d6b931d954f93fec36e0517675d8"},"previous_names":["lin-stephanie/rehype-callouts"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-stephanie%2Frehype-callouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-stephanie%2Frehype-callouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-stephanie%2Frehype-callouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-stephanie%2Frehype-callouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lin-stephanie","download_url":"https://codeload.github.com/lin-stephanie/rehype-callouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248563126,"owners_count":21125207,"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":["admonitions","alerts","astro","callouts","markdow","obsidian","rehype-plugin"],"created_at":"2024-09-24T19:49:51.759Z","updated_at":"2025-04-12T11:41:14.003Z","avatar_url":"https://github.com/lin-stephanie.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lin-stephanie"],"categories":[],"sub_categories":[],"readme":"# rehype-callouts\n\n[![version][version-badge]][version-link]\n[![codecov][coverage-badge]][coverage]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![jsDocs.io][jsdocs-src]][jsdocs-href]\n\nA [rehype](https://github.com/rehypejs/rehype) plugin for processing and rendering blockquote-based callouts.\n\n## What is this?\n\nThis plugin adds support for callouts (admonitions/alerts), allowing you to use [Obsidian's callout syntax](https://help.obsidian.md/Editing+and+formatting/Callouts) to achieve the following features:\n\n- Includes default callout types for various themes.\n- Supports collapsible callouts with `-/+` and nestable callouts.\n- Optionally import stylesheets for corresponding themes.\n- Allows custom titles with markdown syntax.\n- Customizable default callout types.\n- Configurable new callout types.\n- Configurable aliases for callout types.\n- Configurable icon display.\n- Configurable element attributes.\n\n## When should I use this?\n\nThis plugin helps render markdown callouts, ideal for blogs built with frameworks like Astro or Next.js. It processes HTML directly without needing `allowDangerousHtml` in [remark-rehype](https://github.com/remarkjs/remark-rehype) and supports collapsible callouts with the `details` tag, all without JavaScript.\n\n## Installation\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). In Node.js (version 18+), install with your package manager:\n\n```sh\nnpm install rehype-callouts\nyarn add rehype-callouts\npnpm add rehype-callouts\n```\n\nIn Deno with [`esm.sh`](https://esm.sh/):\n\n```js\nimport rehypeCallouts from 'https://esm.sh/rehype-callouts'\n```\n\nIn browsers with [`esm.sh`](https://esm.sh/):\n\n```html\n\u003cscript type=\"module\"\u003e\n  import rehypeCallouts from 'https://esm.sh/rehype-callouts?bundle'\n\u003c/script\u003e\n```\n\n## Usage\n\nSay `example.md` contains:\n\n```md\n\u003c!-- Callout type names are case-insensitive: 'Note', 'NOTE', and 'note' are equivalent. --\u003e\n\n\u003e [!note] This is a _non-collapsible_ callout\n\u003e Some content is displayed directly!\n\n\u003e [!WARNING]- This is a **collapsible** callout\n\u003e Some content shown after opening!\n```\n\nFor vanilla JS：\n\n```js\n// example.js\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkRehype from 'remark-rehype'\nimport rehypeCallouts from 'rehype-callouts'\nimport rehypeStringify from 'rehype-stringify'\nimport { readSync } from 'to-vfile'\n\nconst file = unified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  .use(rehypeCallouts)\n  .use(rehypeStringify)\n  .processSync(readSync('example.md'))\n\nconsole.log(String(file))\n```\n\nFor Astro projects:\n\n```ts\n// astro.config.ts\nimport { defineConfig } from 'astro/config'\nimport rehypeCallouts from 'rehype-callouts'\n\n// https://docs.astro.build/en/reference/configuration-reference/\nexport default defineConfig({\n  markdown: {\n    rehypePlugins: [rehypeCallouts],\n  },\n})\n```\n\nFor Next.js projects:\n\n```ts\n// next.config.ts\nimport createMDX from '@next/mdx'\nimport rehypeCallouts from 'rehype-callouts'\nimport type { NextConfig } from 'next'\n\n// https://nextjs.org/docs/app/api-reference/config/next-config-js\nconst nextConfig: NextConfig = {\n  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],\n}\n\nconst withMDX = createMDX({\n  options: {\n    remarkPlugins: [],\n    rehypePlugins: [rehypeCallouts],\n    // With Turbopack, specify plugin names as strings\n    // rehypePlugins: [['rehype-callouts']],\n  },\n})\n\nexport default withMDX(nextConfig)\n```\n\nRun `node example.js` (`pnpm dev`) to get:\n\n```html\n\u003cdiv class=\"callout\" data-callout=\"note\" data-collapsible=\"false\"\u003e\n  \u003cdiv class=\"callout-title\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cem\u003enon-collapsible\u003c/em\u003e callout\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"callout-content\"\u003e\n    \u003cp\u003eSome content is displayed directly!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdetails class=\"callout\" data-callout=\"warning\" data-collapsible=\"true\"\u003e\n  \u003csummary class=\"callout-title\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cstrong\u003ecollapsible\u003c/strong\u003e callout\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-fold-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n  \u003c/summary\u003e\n  \u003cdiv class=\"callout-content\"\u003e\n    \u003cp\u003eSome content shown after opening!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/details\u003e\n```\n\n## API\n\nThis package exports no identifiers. The default export is [`rehypeCallouts`](#unifieduserehypecallouts-options).\n\n### `unified().use(rehypeCallouts[, options])`\n\nUsed to render callouts.\n\n###### Parameters\n\n- `options` ([`UserOptions`](#useroptions), optional) — configuration\n\n###### Returns\n\nTransform ([`Transformer`](https://github.com/unifiedjs/unified#transformer)).\n\n### `UserOptions`\n\nConfiguration (TypeScript type). All options are optional.\n\n###### Fields\n\n- `theme` (`'github'|'obsidian'|'vitepress'`, default: `'obsidian'`) — your desired callout theme to automatically apply its default callout types.\n- `callouts` ([`Record\u003cstring, CalloutConfig\u003e`](https://github.com/lin-stephanie/rehype-callouts/blob/main/src/types.ts#L16), default: see [source code](https://github.com/lin-stephanie/rehype-callouts/tree/main/src/themes)) — define default or custom callouts as key-value pairs, where each key is a callout type and the value specifies its default text and icon, e.g., `{'note': {title: 'custom title'}, 'custom': {title: 'new callout', indicator: '\u003csvg ...\"\u003e...\u003c/svg\u003e'}}`.\n- `aliases` (`Record\u003cstring, string[]\u003e`, default: `{}`) — aliases for callout types, e.g., `{'note': ['n'], 'tip': ['t']}`.\n- `showIndicator` (`boolean`, default: `true`) — whether to display an type-specific icons before callout title.\n- `tags` ([`TagsConfig`](https://github.com/lin-stephanie/rehype-callouts/blob/main/src/types.ts#L42), default: all `div`) — HTML tag names for callout structure elements.\n- `props` ([`PropsConfig`](https://github.com/lin-stephanie/rehype-callouts/blob/main/src/types.ts#L103), default: all `null`) — properties for callout structure elements, where `class` or `className` overrides default class names; see [examples](#examples) below.\n\n## Styling\n\nYou can customize callout styles with the class names or by importing the provided [theme-specific](#themes) stylesheets using one of the following methods.\n\nImport in JavaScript/TypeScript:\n\n```ts\nimport 'rehype-callouts/theme/github'\n// import 'rehype-callouts/theme/obsidian'\n// import 'rehype-callouts/theme/vitepress'\n```\n\nImport in a CSS file:\n\n```css\n@import 'rehype-callouts/theme/github';\n```\n\nImport in a Sass file:\n\n```scss\n@use 'rehype-callouts/theme/github';\n```\n\nDirectly include in HTML via CDN ([unpkg.com](https://unpkg.com) or [jsdelivr.net](https://www.jsdelivr.com/)):\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/rehype-callouts/dist/themes/github/index.css\"\n/\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/rehype-callouts/dist/themes/github/index.css\"\n/\u003e\n```\n\nOnce imported, you can set colors for default or custom callouts as follows:\n\n```css\n/* Using CSS custom properties (for default callouts only) */\n:root {\n  --callout-note-color-light: pink;\n  --callout-note-color-dark: #ffc0cb;\n  --callout-tip-color-light: rgb(255, 192, 203);\n  --callout-tip-color-dark: hsl(350, 100%, 88%);\n  /* Customize colors for default callout types included in the theme \n  using `--callout-{type}-color-{light|dark}: \u003ccolor\u003e` */\n}\n\n/* Using attribute selectors (for both default and custom callouts) */\n/* Custom callouts default to `#888` if no color is set */\n[data-callout='warning'],\n[data-callout='custom'] {\n  --rc-color-light: pink;\n  --rc-color-dark: #ffc0cb;\n}\n```\n\n### Themes\n\nThis package provides callout styles for [GitHub](https://github.com/orgs/community/discussions/16925), [Obsidian](https://help.obsidian.md/Editing+and+formatting/Callouts), and [VitePress](https://vitepress.dev/guide/markdown#github-flavored-alerts), with dark mode support via the `.dark` class. For more, check the [source code](https://github.com/lin-stephanie/rehype-callouts/tree/main/src/themes).\n\n#### GitHub\n\n![github](https://raw.githubusercontent.com/lin-stephanie/assets/refs/heads/main/rehype-callouts/github.png)\n\n#### Obsidian\n\n![obsidian](https://raw.githubusercontent.com/lin-stephanie/assets/refs/heads/main/rehype-callouts/obsidian.png)\n\n#### VitePress\n\n![vitepress](https://raw.githubusercontent.com/lin-stephanie/assets/refs/heads/main/rehype-callouts/vitepress.png)\n\n## Examples\n\n### Example: override default class names\n\nThe `props` option allows overriding the default class names generated by the plugin. The example from before can be changed like so:\n\n```diff\nimport rehypeCallouts from 'rehype-callouts'\n...\n\nconst file = unified()\n  .use(remarkParse)\n  .use(remarkRehype)\n- .use(rehypeCallouts)\n+ .use(rehypeCallouts, {\n+   props: {\n+     titleProps: { class: 'custom-class1' },\n+     contentProps: { className: ['custom-class2', 'custom-class3'] },\n+   },\n+ })\n  .use(rehypeStringify)\n  .processSync(readSync('example.md'))\n\nconsole.log(String(file))\n```\n\n…that would output:\n\n```diff\n\u003cdiv class=\"callout\" data-callout=\"note\" data-collapsible=\"false\"\u003e\n- \u003cdiv class=\"callout-title\"\u003e\n+ \u003cdiv class=\"custom-class1\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cem\u003enon-collapsible\u003c/em\u003e callout\n    \u003c/div\u003e\n  \u003c/div\u003e\n- \u003cdiv class=\"callout-content\"\u003e\n+ \u003cdiv class=\"custom-class2 custom-class3\"\u003e\n    \u003cp\u003eSome content is displayed directly!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdetails class=\"callout\" data-callout=\"warning\" data-collapsible=\"true\"\u003e\n- \u003csummary class=\"callout-title\"\u003e\n+ \u003csummary class=\"custom-class1\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cstrong\u003ecollapsible\u003c/strong\u003e callout\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-fold-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n  \u003c/summary\u003e\n- \u003cdiv class=\"callout-content\"\u003e\n+ \u003cdiv class=\"custom-class2 custom-class3\"\u003e\n    \u003cp\u003eSome content shown after opening!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/details\u003e\n```\n\n### Example: custom attributes for callout elements\n\nThe `props` option allows adding custom attributes to elements in generated callouts. The example from before can be changed to add the [`dir: auto`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attribute to the outer container of both collapsible and non-collapsible callouts, and to set a custom color for `'note'` callouts, like so:\n\n```diff\nimport rehypeCallouts from 'rehype-callouts'\n...\n\nconst file = unified()\n  .use(remarkParse)\n  .use(remarkRehype)\n- .use(rehypeCallouts)\n+ .use(rehypeCallouts, {\n+   props: {\n+     containerProps(_, type) {\n+       const newProps: Record\u003cstring, string\u003e = {\n+         dir: 'auto',\n+       }\n+       if (type === 'note') {\n+         newProps.style = '--rc-color-light:#fc7777; --rc-color-dark:#fa9292;'\n+       }\n+       return newProps\n+     },\n+   },\n+ })\n  .use(rehypeStringify)\n  .processSync(readSync('example.md'))\n\nconsole.log(String(file))\n```\n\n…that would output:\n\n```diff\n\u003cdiv\n+ dir=\"auto\"\n+ style=\"--rc-color-light:#fc7777; --rc-color-dark:#fa9292;\"\n  class=\"callout\"\n  data-callout=\"note\"\n  data-collapsible=\"false\"\n\u003e\n  \u003cdiv class=\"callout-title\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cem\u003enon-collapsible\u003c/em\u003e callout\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"callout-content\"\u003e\n    \u003cp\u003eSome content is displayed directly!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdetails\n+ dir=\"auto\"\n  class=\"callout\"\n  data-callout=\"warning\"\n  data-collapsible=\"true\"\n\u003e\n  \u003csummary class=\"callout-title\"\u003e\n    \u003cdiv class=\"callout-title-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-text\"\u003e\n      This is a \u003cstrong\u003ecollapsible\u003c/strong\u003e callout\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-fold-icon\" aria-hidden=\"true\"\u003e\n      \u003c!-- svg icon--\u003e\n    \u003c/div\u003e\n  \u003c/summary\u003e\n  \u003cdiv class=\"callout-content\"\u003e\n    \u003cp\u003eSome content shown after opening!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/details\u003e\n```\n\n**Note:** In Svelte, using `dir=\"auto\"` may trigger a compiler error. See [#15126](https://github.com/sveltejs/svelte/issues/15126) for details.\n\n## Types\n\nThis package is fully typed with [TypeScript](https://www.typescriptlang.org/). It exports the additional types `UserOptions`, `CalloutConfig`, `TagsConfig`, `PropsConfig` and `CreateProperties`. See [jsDocs.io](https://www.jsdocs.io/package/rehype-callouts) for type details.\n\n## Credits\n\n- [staticnoise/rehype-obsidian-callout](https://gitlab.com/staticnoise/rehype-obsidian-callout) - basic functionality.\n- [Octions](https://primer.style/foundations/icons/) - default icons for GitHub callouts.\n- [Lucide](https://lucide.dev/) - default icons for Obsidian, VitePress callouts.\n\n## Contribution\n\nIf you see any errors or room for improvement on this plugin, feel free to open an [issues](https://github.com/lin-stephanie/rehype-callouts/issues) or [pull request](https://github.com/lin-stephanie/rehype-callouts/pulls) . Thank you in advance for contributing!\n\n## License\n\n[MIT](https://github.com/lin-stephanie/rehype-callouts/blob/main/LICENSE) © 2024-PRESENT [Stephanie Lin](https://github.com/lin-stephanie)\n\n\u003c!-- Badges --\u003e\n\n[version-badge]: https://img.shields.io/github/v/release/lin-stephanie/rehype-callouts?label=release\u0026style=flat\u0026colorA=080f12\u0026colorB=f87171\n[version-link]: https://github.com/lin-stephanie/rehype-callouts/releases\n[coverage-badge]: https://img.shields.io/codecov/c/github/lin-stephanie/rehype-callouts?style=flat\u0026colorA=080f12\u0026colorB=f87171\n[coverage]: https://codecov.io/github/lin-stephanie/rehype-callouts\n[npm-downloads-src]: https://img.shields.io/npm/dm/rehype-callouts?style=flat\u0026colorA=080f12\u0026colorB=f87171\n[npm-downloads-href]: https://npmjs.com/package/rehype-callouts\n[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=080f12\u0026colorB=f87171\n[jsdocs-href]: https://www.jsdocs.io/package/rehype-callouts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-stephanie%2Frehype-callouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flin-stephanie%2Frehype-callouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-stephanie%2Frehype-callouts/lists"}