# gatsby-remark-autolink-headers > Gatsby plugin to autolink headers in markdown processed by Remark Latest version **6.16.0** (published 2026-01-26) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-remark-autolink-headers pnpm add gatsby-remark-autolink-headers yarn add gatsby-remark-autolink-headers bun add gatsby-remark-autolink-headers ``` ## Health **Score 60/100 (C)** — status: stable. Positive: no vulnerabilities; high maintenance score; popular repo; extremely popular. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 6.16.0 | | Published | 2026-01-26 | | First published | 2017-05-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=18.0.0 <26 | | Dependencies | 5 | | Unpacked size | 59.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 55940 | | Author | Kyle Mathews | | Maintainers | pieh, kathmbeck, serhalp-netlify, mlgualtieri-gatsby | | Keywords | gatsby, gatsby-plugin, remark | ## Links - npm: https://www.npmjs.com/package/gatsby-remark-autolink-headers - Repository: https://github.com/gatsbyjs/gatsby - Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-autolink-headers#readme - Issues: https://github.com/gatsbyjs/gatsby/issues - npm.io page: https://npm.io/package/gatsby-remark-autolink-headers ## Dependencies (5) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [github-slugger](https://npm.io/package/github-slugger.md) ^1.5.0 - [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3 - [mdast-util-to-string](https://npm.io/package/mdast-util-to-string.md) ^2.0.0 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 6.16.0 (latest) — 2026-01-26 - 6.17.0-next.0 (next) — 2025-11-27 - 6.18.0-react19.1 (react19) — 2025-11-26 - 6.13.0-alpha-alt-image-cdn.44 (alt-image-cdn) — 2023-11-03 - 6.9.0-image-cdn-configurable.4 (image-cdn-configurable) — 2023-04-11 - 4.12.0 (latest-v3) — 2022-12-07 - 5.25.0 (latest-v4) — 2022-12-07 - 6.0.0-alpha-drupal-proxyurl.14 (drupal-proxyurl) — 2022-11-22 - 5.24.1-alpha-wordpress-image-err.27 (wordpress-image-err) — 2022-11-09 - 5.14.0-alpha-transformer-json.26 (alpha-transformer-json) — 2022-10-12 - 6.0.0-alpha-v5.d20221012t101120.57 (alpha-v5) — 2022-10-12 - 5.25.0-alpha-image-cdn-pathprefix.48 (image-cdn-pathprefix) — 2022-10-07 - 5.23.0-alpha-image-cdn-enc.40 (image-cdn-enc) — 2022-09-16 - 5.23.0-alpha-a5-peer.70 (alpha-a5-peer) — 2022-09-14 - 5.23.0-alpha-preview-gh-api.26 (preview-gh-api) — 2022-09-08 - … 527 more at https://npm.io/package/gatsby-remark-autolink-headers/versions ## README # gatsby-remark-autolink-headers Adds GitHub-style hover links to headers in your markdown files when they're rendered. This is a sub-plugin for `gatsby-transformer-remark`. As demoed below, add this plugin to the options of `gatsby-transformer-remark`. ## Install ``` npm install gatsby-remark-autolink-headers ``` ## How to use ```javascript // In your gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-transformer-remark`, options: { plugins: [`gatsby-remark-autolink-headers`], }, }, ], } ``` **Please note:** If you are using `gatsby-remark-prismjs`, make sure that it’s listed after this plugin. Otherwise, you might face an issue with [redundant details](https://github.com/gatsbyjs/gatsby/issues/5764). ```javascript // good { resolve: `gatsby-transformer-remark`, options: { plugins: [ `gatsby-remark-autolink-headers`, `gatsby-remark-prismjs`, ], }, } // bad { resolve: `gatsby-transformer-remark`, options: { plugins: [ `gatsby-remark-prismjs`, // should be placed after `gatsby-remark-autolink-headers` `gatsby-remark-autolink-headers`, ], }, } ``` ## Options - `offsetY`: Signed integer. Vertical offset value in pixels (optional) - `icon`: SVG shape inside a template literal or boolean `false`. Set your own svg or disable icon (optional) - `className`: String. Set your own class for the anchor (optional) - `maintainCase`: Boolean. Maintains the case for markdown header (optional) - `removeAccents`: Boolean. Remove accents from generated headings IDs (optional) - `enableCustomId`: Boolean. Enable custom header IDs with `{#id}` (optional) - `isIconAfterHeader`: Boolean. Enable the anchor icon to be inline at the end of the header text (optional) - `elements`: String array. Specify which type of header tags to link (optional) ```javascript // In your gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: `gatsby-remark-autolink-headers`, options: { offsetY: `100`, icon: ``, className: `custom-class`, maintainCase: true, removeAccents: true, isIconAfterHeader: true, elements: [`h1`, `h4`], }, }, ], }, }, ], } ``` **Please note:** The `enableCustomId` option is not compatible with `gatsby-plugin-mdx` as the syntax is invalid in MDX v2. You should use [`rehype-slug-custom-id`](https://github.com/unicorn-utterances/rehype-slug-custom-id) instead. ## How to style the anchor link By default, the anchor link has a class of `anchor` (see `className` option to change this name) on the element but has no additional styling. To make it fit your website, you'll have to write some CSS to change the appearance. In your CSS you can specify this element, in this instance the anchor tag will appear red: ```css a.anchor { fill: "red"; } ``` **Please note:** There are a variety of approaches to styling your Gatsby site, see [styling documentation](https://www.gatsbyjs.com/docs/styling/) for more detail. --- _Source: https://npm.io/package/gatsby-remark-autolink-headers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._