Adding Custom Anchors to Headings in Markdown — Eleventy

## text {#id}

Applying Custom Anchors

npm i markdown-it markdown-it-anchor markdown-it-attrs
const markdownIt = require(‘markdown-it’);const markdownItAnchor = require(‘markdown-it-anchor’);const markdownItAttrs = require(‘markdown-it-attrs’);
eleventyConfig.setLibrary(“md”, markdownIt().use(markdownItAnchor)).use(markdownItAttrs)
let markdownItOptions = {  html: true // you can include HTML tags}let markdownItAnchorOptions = {  level: 2 // minimum level header — anchors will only be applied to h2 level headers and below but not h1}eleventyConfig.setLibrary(“md”, markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions).use(markdownItAttrs))
## Heading 1 {#head1}

Applying Default Anchors

eleventyConfig.setLibrary(“md”, markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions))

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Murtuza

Murtuza

Full Stack Developer | Content Creator | Technical Writer