diff --git a/packages/gatsby-remark-autolink-headers/README.md b/packages/gatsby-remark-autolink-headers/README.md
index 8814340cfe4dc..42113bca576f1 100644
--- a/packages/gatsby-remark-autolink-headers/README.md
+++ b/packages/gatsby-remark-autolink-headers/README.md
@@ -56,6 +56,7 @@ Note: if you are using `gatsby-remark-prismjs`, make sure that it’s listed aft
- `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)
```javascript
// In your gatsby-config.js
@@ -72,6 +73,7 @@ module.exports = {
icon: ``,
className: `custom-class`,
maintainCase: true,
+ removeAccents: true,
},
},
],
diff --git a/packages/gatsby-remark-autolink-headers/package.json b/packages/gatsby-remark-autolink-headers/package.json
index 64fdcf21b45c4..9ba690fce6685 100644
--- a/packages/gatsby-remark-autolink-headers/package.json
+++ b/packages/gatsby-remark-autolink-headers/package.json
@@ -9,6 +9,7 @@
"dependencies": {
"@babel/runtime": "^7.0.0",
"github-slugger": "^1.1.1",
+ "lodash": "^4.17.11",
"mdast-util-to-string": "^1.0.2",
"unist-util-visit": "^1.3.0"
},
diff --git a/packages/gatsby-remark-autolink-headers/src/__tests__/index.js b/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
index bc68ddf20a7de..33359862ae8c3 100644
--- a/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
+++ b/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
@@ -146,4 +146,40 @@ describe(`gatsby-remark-autolink-headers`, () => {
expect(node).toMatchSnapshot()
})
})
+
+ it(`keeps accents by default`, () => {
+ const markdownAST = remark.parse(`
+# Héading One
+
+## Héading Two
+
+### Héading Three
+ `)
+ const removeAccents = false
+
+ const transformed = plugin({ markdownAST }, { removeAccents })
+
+ visit(transformed, `heading`, node => {
+ expect(node.data.id).toBeDefined()
+ expect(node.data.id).toEqual(expect.stringMatching(/^héading/))
+ })
+ })
+
+ it(`remove accents if removeAccents is passed`, () => {
+ const markdownAST = remark.parse(`
+# Héading One
+
+## Héading Two
+
+### Héading Three
+ `)
+ const removeAccents = true
+
+ const transformed = plugin({ markdownAST }, { removeAccents })
+
+ visit(transformed, `heading`, node => {
+ expect(node.data.id).toBeDefined()
+ expect(node.data.id).toEqual(expect.stringMatching(/^heading/))
+ })
+ })
})
diff --git a/packages/gatsby-remark-autolink-headers/src/index.js b/packages/gatsby-remark-autolink-headers/src/index.js
index 8036a90a92f33..714207ede915e 100644
--- a/packages/gatsby-remark-autolink-headers/src/index.js
+++ b/packages/gatsby-remark-autolink-headers/src/index.js
@@ -1,6 +1,7 @@
const toString = require(`mdast-util-to-string`)
const visit = require(`unist-util-visit`)
const slugs = require(`github-slugger`)()
+const deburr = require(`lodash/deburr`)
function patch(context, key, value) {
if (!context[key]) {
@@ -14,12 +15,18 @@ const svgIcon = `