{"id":16812193,"url":"https://github.com/flet/markdown-it-github-headings","last_synced_at":"2025-09-13T00:31:49.387Z","repository":{"id":20349201,"uuid":"89668770","full_name":"Flet/markdown-it-github-headings","owner":"Flet","description":":octocat: Add anchors and links to headings just like Github does","archived":false,"fork":false,"pushed_at":"2022-06-09T16:27:31.000Z","size":35,"stargazers_count":24,"open_issues_count":6,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-30T05:27:01.062Z","etag":null,"topics":["anchor","commonmark","headings","markdown-it","plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-28T04:53:35.000Z","updated_at":"2024-12-09T01:18:10.000Z","dependencies_parsed_at":"2022-08-28T02:51:58.311Z","dependency_job_id":null,"html_url":"https://github.com/Flet/markdown-it-github-headings","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flet%2Fmarkdown-it-github-headings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flet%2Fmarkdown-it-github-headings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flet%2Fmarkdown-it-github-headings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flet%2Fmarkdown-it-github-headings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flet","download_url":"https://codeload.github.com/Flet/markdown-it-github-headings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232802752,"owners_count":18578684,"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":["anchor","commonmark","headings","markdown-it","plugin"],"created_at":"2024-10-13T10:21:01.452Z","updated_at":"2025-01-06T23:48:22.761Z","avatar_url":"https://github.com/Flet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# markdown-it-github-headings\n\nAdd GitHub style anchor tags to headers\n\n[![npm][npm-image]][npm-url]\n[![travis][travis-image]][travis-url]\n[![standard][standard-image]][standard-url]\n\n[npm-image]: https://img.shields.io/npm/v/markdown-it-github-headings.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/markdown-it-github-headings\n[travis-image]: https://img.shields.io/travis/Flet/markdown-it-github-headings.svg?style=flat-square\n[travis-url]: https://travis-ci.org/Flet/markdown-it-github-headings\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: http://npm.im/standard\n\n## Install\n\n```\nnpm install markdown-it-github-headings\n```\n\n## Usage\n\n```js\nvar md = require('markdown-it')()\n  .use(require('markdown-it-github-headings'), options)\n\n```\n\n## Options and Defaults\n\nThe defaults will make the heading anchors behave as close to how GitHub behaves as possible.\n\nName              | Description                                                    | Default\n------------------|----------------------------------------------------------------|-----------------------------------\n`className`                     | name of the class that will be added to the anchor tag               | `anchor`\n`prefixHeadingIds`              | add a prefix to each heading ID. *(see security note below)*         | `true`\n`prefix`                        | if `prefixHeadingIds` is true, use this string to prefix each ID.    | `user-content-`\n`enableHeadingLinkIcons`        | Adds the icon \u003csvg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewbox=\"0 0 16 16\" width=\"16\"\u003e\u003cpath d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\u003e\u003c/path\u003e\u003c/svg\u003e next to each heading | `true`\n`linkIcon`                      | If `enableHeadingLinkIcons` is true, use this to supply a custom icon (or anything really) | \u003csvg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewbox=\"0 0 16 16\" width=\"16\"\u003e\u003cpath d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\u003e\u003c/path\u003e\u003c/svg\u003e\n`resetSlugger`                     | reset the slugger counter between .render calls for duplicate headers. (See tests for example)              | true\n\n## Why should I prefix heading IDs?\nWhen using user generated content, its possible to run into **DOM Clobbering** when heading IDs are generated. Since IDs are used by JavaScript and CSS, a user could craft a page that breaks functionality or styles. A good way to avoid clobbering is to add a prefix to every generated ID to ensure they cannot overlap with existing IDs.\n\nIf you have full control over the content, there is less of a risk, but be aware that strange bugs related to DOM Clobbering are still possible!\n\nFor more information, here are some good resources on the topic:\n- [User-generated content and DOM clobbering](http://opensoul.org/2014/09/05/dom-clobbering/)\n- [In the DOM, no one will hear you scream](https://www.slideshare.net/x00mario/in-the-dom-no-one-will-hear-you-scream)\n- [A discussion about GitHub implementation](https://github.com/jch/html-pipeline/pull/111#issuecomment-34369984)\n- [An open issue on markdown-it repo](https://github.com/markdown-it/markdown-it/issues/28)\n\n### But the prefixes make links look real gross.\nOne solution is to write some client side JavaScript to force non-prefixed hashes to jump to prefixed anchors. This is how its handled on GitHub and npmjs.com.\n\nCheck out [marky-deep-links](https://github.com/Flet/marky-deep-links) for an example (works great with browserify or webpack).\n\n\n## Contributing\n\nContributions welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.\n\n## License\n\n[ISC](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflet%2Fmarkdown-it-github-headings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflet%2Fmarkdown-it-github-headings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflet%2Fmarkdown-it-github-headings/lists"}