{"id":15048719,"url":"https://github.com/playfulprogramming/rehype-slug-custom-id","last_synced_at":"2025-04-10T01:33:23.724Z","repository":{"id":57352574,"uuid":"436200548","full_name":"playfulprogramming/rehype-slug-custom-id","owner":"playfulprogramming","description":"plugin to add `id` attributes to headings similar to gatsby-remark-autolink-headers","archived":false,"fork":false,"pushed_at":"2024-06-24T15:03:10.000Z","size":71,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-10-25T01:14:51.274Z","etag":null,"topics":["markdown","react","rehype","unified"],"latest_commit_sha":null,"homepage":"","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/playfulprogramming.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},"funding":{"open_collective":"unicorn-utterances"}},"created_at":"2021-12-08T10:08:18.000Z","updated_at":"2024-06-24T15:03:13.000Z","dependencies_parsed_at":"2024-08-10T22:51:38.644Z","dependency_job_id":"97f5271e-0d28-4244-990f-3e4e5251e247","html_url":"https://github.com/playfulprogramming/rehype-slug-custom-id","commit_stats":null,"previous_names":["playfulprogramming/rehype-slug-custom-id"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playfulprogramming%2Frehype-slug-custom-id","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playfulprogramming%2Frehype-slug-custom-id/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playfulprogramming%2Frehype-slug-custom-id/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playfulprogramming%2Frehype-slug-custom-id/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/playfulprogramming","download_url":"https://codeload.github.com/playfulprogramming/rehype-slug-custom-id/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767420,"owners_count":20992589,"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":["markdown","react","rehype","unified"],"created_at":"2024-09-24T21:15:42.875Z","updated_at":"2025-04-10T01:33:23.704Z","avatar_url":"https://github.com/playfulprogramming.png","language":"JavaScript","funding_links":["https://opencollective.com/unicorn-utterances"],"categories":[],"sub_categories":[],"readme":"# rehype-slug-custom-id\n\n[![Build][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][downloads]\n[![Size][size-badge]][size]\n\n[**rehype**][rehype] plugin to add `id`s to headings with the option for custom IDs.\n\n## Install\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):\nNode 12+ is needed to use it and it must be `import`ed instead of `require`d.\n\n[npm][]:\n\n```sh\nnpm install rehype-slug-custom-id\n```\n\n## Use\n\nSay we have the following file, `fragment.html`:\n\n```html\n\u003ch1\u003eLorem ipsum 😪\u003c/h1\u003e\n\u003ch2\u003edolor—sit—amet\u003c/h2\u003e\n\u003ch3\u003econsectetur \u0026amp; adipisicing\u003c/h3\u003e\n\u003ch4\u003eelit\u003c/h4\u003e\n\u003ch5\u003eelit\u003c/h5\u003e\n\u003ch6\u003eCustom ID Should Be Here {#custom-id}\u003c/h6\u003e\n```\n\nAnd our script, `example.js`, looks as follows:\n\n```js\nimport fs from 'node:fs'\nimport {rehype} from 'rehype'\nimport slug from 'rehype-slug'\n\nconst buf = fs.readFileSync('fragment.html')\n\nrehype()\n  .data('settings', {fragment: true})\n  .use(slug)\n  .process(buf)\n  .then((file) =\u003e {\n    console.log(String(file))\n  })\n```\n\nNow, running `node example` yields:\n\n```html\n\u003ch1 id=\"lorem-ipsum-\"\u003eLorem ipsum 😪\u003c/h1\u003e\n\u003ch2 id=\"dolorsitamet\"\u003edolor—sit—amet\u003c/h2\u003e\n\u003ch3 id=\"consectetur--adipisicing\"\u003econsectetur \u0026#x26; adipisicing\u003c/h3\u003e\n\u003ch4 id=\"elit\"\u003eelit\u003c/h4\u003e\n\u003ch5 id=\"elit-1\"\u003eelit\u003c/h5\u003e\n\u003ch6 id=\"custom-id\"\u003eCustom ID Should Be Here\u003c/h6\u003e\n```\n\n## API\n\nThe default export is `rehypeSlug`.\n\n### `unified().use(rehypeSlug)`\n\nAdd `id` properties to h1-h6 headings that don’t already have one.\n\nUses [**github-slugger**][ghslug] to create GitHub style `id`s, or a custom ID if supplied like so:\n\n```html\n\u003ch1\u003eID {#custom-id-here}\u003c/h1\u003e\n```\n\nWe support the following options for the plugin:\n\n* `enableCustomId`: `Boolean`. Enable custom header IDs with {#id} (optional)\n* `maintainCase`: `Boolean`. Maintains the case for markdown header (optional)\n* `removeAccents`: `Boolean`. Remove accents from generated headings IDs (optional)\n\n## Security\n\nUse of `rehype-slug` can open you up to a [cross-site scripting (XSS)][xss]\nattack as it sets `id` attributes on headings.\nIn a browser, elements are retrievable by `id` with JavaScript and CSS.\nIf a user injects a heading that slugs to an `id` you are already using,\nthe user content may impersonate the website.\n\nAlways be wary with user input and use [`rehype-sanitize`][sanitize].\n\n## Related\n\n* [`rehype-slug`](https://github.com/rehypejs/rehype-slug)\n  — Add slugs to headings in html\n* [`remark-slug`](https://github.com/wooorm/remark-slug)\n  — Add slugs to headings in markdown\n* [`gatsby-remark-autolink-headers`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-autolink-headers)\n  — Add slugs to headings in markdown for Gatsby\n\n\u003c!-- Definitions --\u003e\n\n[build-badge]: https://github.com/unicorn-utterances/rehype-slug-custom-id/workflows/main/badge.svg\n\n[build]: https://github.com/unicorn-utterances/rehype-slug-custom-id/actions\n\n[coverage-badge]: https://img.shields.io/codecov/c/github/unicorn-utterances/rehype-slug-custom-id.svg\n\n[coverage]: https://codecov.io/github/unicorn-utterances/rehype-slug-custom-id\n\n[downloads-badge]: https://img.shields.io/npm/dm/rehype-slug-custom-id.svg\n\n[downloads]: https://www.npmjs.com/package/rehype-slug-custom-id\n\n[size-badge]: https://img.shields.io/bundlephobia/minzip/rehype-slug-custom-id.svg\n\n[size]: https://bundlephobia.com/result?p=rehype-slug-custom-id\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[license]: license\n\n[rehype]: https://github.com/rehypejs/rehype\n\n[ghslug]: https://github.com/Flet/github-slugger\n\n[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting\n\n[sanitize]: https://github.com/rehypejs/rehype-sanitize\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayfulprogramming%2Frehype-slug-custom-id","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplayfulprogramming%2Frehype-slug-custom-id","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayfulprogramming%2Frehype-slug-custom-id/lists"}