Docs: update documentation js examples, using es6 (#36203)

* Docs: update components documentation using es6

* Docs: update js blocks around docs, using es6

* Docs: update components documentation using es6

* Test linter

21 files changed, 504 insertions, 179 deletions

diff --git a/package-lock.json b/package-lock.json
index 1759f5b526..4b36c1830f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "eslint": "^8.13.0",
         "eslint-config-xo": "^0.40.0",
         "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-markdown": "^2.2.1",
         "eslint-plugin-unicorn": "^42.0.0",
         "find-unused-sass-variables": "^4.0.4",
         "globby": "^11.1.0",
@@ -1976,6 +1977,15 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "node_modules/@types/mdast": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
+      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -2009,6 +2019,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "node_modules/@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -3132,6 +3148,36 @@
         "node": ">=4"
       }
     },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4398,6 +4444,21 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
+    "node_modules/eslint-plugin-markdown": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
+      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
+      "dev": true,
+      "dependencies": {
+        "mdast-util-from-markdown": "^0.8.5"
+      },
+      "engines": {
+        "node": "^8.10.0 || ^10.12.0 || >= 12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
     "node_modules/eslint-plugin-unicorn": {
       "version": "42.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-42.0.0.tgz",
@@ -5860,6 +5921,30 @@
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
       "dev": true
     },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dev": true,
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -5975,6 +6060,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -6020,6 +6115,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -6955,6 +7060,33 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7062,6 +7194,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -7812,6 +7964,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dev": true,
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -10368,6 +10538,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -12189,6 +12372,15 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/mdast": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
+      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -12222,6 +12414,12 @@
         "@types/node": "*"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -13034,6 +13232,24 @@
         "supports-color": "^5.3.0"
       }
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "dev": true
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -14134,6 +14350,15 @@
         }
       }
     },
+    "eslint-plugin-markdown": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
+      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
+      "dev": true,
+      "requires": {
+        "mdast-util-from-markdown": "^0.8.5"
+      }
+    },
     "eslint-plugin-unicorn": {
       "version": "42.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-42.0.0.tgz",
@@ -15154,6 +15379,22 @@
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
       "dev": true
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "dev": true
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dev": true,
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -15238,6 +15479,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "dev": true
+    },
     "is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -15265,6 +15512,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "dev": true
+    },
     "is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -15980,6 +16233,25 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -16056,6 +16328,16 @@
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true
     },
+    "micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -16621,6 +16903,20 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dev": true,
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -18513,6 +18809,15 @@
         "crypto-random-string": "^2.0.0"
       }
     },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
diff --git a/package.json b/package.json
index db822d0100..7dc1bb499c 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "eslint": "^8.13.0",
     "eslint-config-xo": "^0.40.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-unicorn": "^42.0.0",
     "find-unused-sass-variables": "^4.0.4",
     "globby": "^11.1.0",
diff --git a/site/.eslintrc.json b/site/.eslintrc.json
index 5bdb283e2d..7cca4bc205 100644
--- a/site/.eslintrc.json
+++ b/site/.eslintrc.json
@@ -3,6 +3,42 @@
     "browser": true,
     "node": false
   },
+  "plugins": [
+    "markdown"
+  ],
+  "overrides": [
+    {
+      // 2. Enable the Markdown processor for all .md files.
+      "files": ["./**/*.md"],
+      "processor": "markdown/markdown"
+    },
+    {
+      // In v2, configuration for fenced code blocks is separate from the
+      // containing Markdown file. Each code block has a virtual filename
+      // appended to the Markdown file's path.
+      "files": [
+        "./**/*.md/*.js"
+      ],
+      // Configuration for fenced code blocks goes with the override for
+      // the code block's virtual filename, for example:
+      "parserOptions": {
+        "ecmaFeatures": {
+          "impliedStrict": true
+        }
+      },
+      "rules": {
+        "no-array-for-each": "off",
+        "no-undef": "off",
+        "no-unused-vars": "off",
+        "unicorn/no-array-for-each": "off",
+        "unicorn/numeric-separators-style": "off",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "off",
+        "no-labels": "off",
+        "no-redeclare": "off"
+      }
+    }
+  ],
   "parserOptions": {
     "sourceType": "script"
   },
diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 694b749bd4..59f9a349f8 100644
--- a/site/content/docs/5.1/components/alerts.md
+++ b/site/content/docs/5.1/components/alerts.md
@@ -35,18 +35,23 @@ Click the button below to show an alert (hidden with inline styles to start), th
 We use the following JavaScript to trigger our live alert demo:
 
 ```js
-var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-var alertTrigger = document.getElementById('liveAlertBtn')
+const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
 
-function alert(message, type) {
-  var wrapper = document.createElement('div')
-  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
+const alert = (message, type) => {
+  const wrapper = document.createElement('div')
+  wrapper.innerHTML = [
+    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
+    `   <div>${message}</div>`,
+    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+    '</div>'
+  ].join('')
 
   alertPlaceholder.append(wrapper)
 }
 
+const alertTrigger = document.getElementById('liveAlertBtn')
 if (alertTrigger) {
-  alertTrigger.addEventListener('click', function () {
+  alertTrigger.addEventListener('click', () => {
     alert('Nice, you triggered this alert message!', 'success')
   })
 }
@@ -189,10 +194,8 @@ Loop that generates the modifier classes with the `alert-variant()` mixin.
 Initialize elements as alerts
 
 ```js
-var alertList = document.querySelectorAll('.alert')
-var alerts = Array.prototype.slice.call(alertList).map(function (element) {
-  return new bootstrap.Alert(element)
-})
+const alertList = document.querySelectorAll('.alert')
+const alerts = [...alertList].map(element => new bootstrap.Alert(element))
 ```
 
 {{< callout info >}}
@@ -212,8 +215,7 @@ See the [triggers](#triggers) section for more details.
 You can create an alert instance with the alert constructor, for example:
 
 ```js
-var myAlert = document.getElementById('myAlert')
-var bsAlert = new bootstrap.Alert(myAlert)
+const bsAlert = new bootstrap.Alert('#myAlert')
 ```
 
 This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
@@ -230,8 +232,7 @@ This makes an alert listen for click events on descendant elements which have th
 Basic usage:
 
 ```js
-var alertNode = document.querySelector('.alert')
-var alert = bootstrap.Alert.getOrCreateInstance(alertNode)
+const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
 alert.close()
 ```
 
@@ -247,8 +248,8 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali
 {{< /bs-table >}}
 
 ```js
-var myAlert = document.getElementById('myAlert')
-myAlert.addEventListener('closed.bs.alert', function () {
+const myAlert = document.getElementById('myAlert')
+myAlert.addEventListener('closed.bs.alert', event => {
   // do something, for instance, explicitly move focus to the most appropriate element,
   // so it doesn't get lost/reset to the start of the page
   // document.getElementById('...').focus()
diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md
index bacc6b23d2..fb9249e6c6 100644
--- a/site/content/docs/5.1/components/buttons.md
+++ b/site/content/docs/5.1/components/buttons.md
@@ -180,8 +180,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
 You can create a button instance with the button constructor, for example:
 
 ```js
-var button = document.getElementById('myButton')
-var bsButton = new bootstrap.Button(button)
+const bsButton = new bootstrap.Button('#myButton')
 ```
 
 {{< bs-table "table" >}}
@@ -196,9 +195,8 @@ var bsButton = new bootstrap.Button(button)
 For example, to toggle all buttons
 
 ```js
-var buttons = document.querySelectorAll('.btn')
-buttons.forEach(function (button) {
-  var button = new bootstrap.Button(button)
+document.querySelectorAll('.btn').forEach(buttonElement => {
+  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
   button.toggle()
 })
 ```
diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md
index 782d620aaa..2714a09dce 100644
--- a/site/content/docs/5.1/components/carousel.md
+++ b/site/content/docs/5.1/components/carousel.md
@@ -302,8 +302,7 @@ The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating
 Call carousel manually with:
 
 ```js
-var myCarousel = document.querySelector('#myCarousel')
-var carousel = new bootstrap.Carousel(myCarousel)
+const carousel = new bootstrap.Carousel('#myCarousel')
 ```
 
 ### Options
@@ -332,8 +331,8 @@ var carousel = new bootstrap.Carousel(myCarousel)
 You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
 
 ```js
-var myCarousel = document.querySelector('#myCarousel')
-var carousel = new bootstrap.Carousel(myCarousel, {
+const myCarouselElement = document.querySelector('#myCarousel')
+const carousel = new bootstrap.Carousel(myCarouselElement, {
   interval: 2000,
   wrap: false
 })
@@ -372,9 +371,9 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
 {{< /bs-table >}}
 
 ```js
-var myCarousel = document.getElementById('myCarousel')
+const myCarousel = document.getElementById('myCarousel')
 
-myCarousel.addEventListener('slide.bs.carousel', function () {
+myCarousel.addEventListener('slide.bs.carousel', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md
index 60b16826ce..91dbef5456 100644
--- a/site/content/docs/5.1/components/collapse.md
+++ b/site/content/docs/5.1/components/collapse.md
@@ -133,10 +133,8 @@ To add accordion-like group management to a collapsible area, add the data attri
 Enable manually with:
 
 ```js
-var collapseElementList = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
-var collapseList = collapseElementList.map(function (collapseEl) {
-  return new bootstrap.Collapse(collapseEl)
-})
+const collapseElementList = document.querySelectorAll('.collapse')
+const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
 ```
 
 ### Options
@@ -163,8 +161,7 @@ Activates your content as a collapsible element. Accepts an optional options `ob
 You can create a collapse instance with the constructor, for example:
 
 ```js
-var myCollapse = document.getElementById('myCollapse')
-var bsCollapse = new bootstrap.Collapse(myCollapse, {
+const bsCollapse = new bootstrap.Collapse('#myCollapse', {
   toggle: false
 })
 ```
@@ -194,8 +191,8 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
 {{< /bs-table >}}
 
 ```js
-var myCollapsible = document.getElementById('myCollapsible')
-myCollapsible.addEventListener('hidden.bs.collapse', function () {
+const myCollapsible = document.getElementById('myCollapsible')
+myCollapsible.addEventListener('hidden.bs.collapse', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index 86b8491ca7..b27715c6c2 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -1050,10 +1050,8 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
 Call the dropdowns via JavaScript:
 
 ```js
-var dropdownElementList = Array.prototype.slice.call(document.querySelectorAll('.dropdown-toggle'))
-var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
-  return new bootstrap.Dropdown(dropdownToggleEl)
-})
+const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
+const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
 ```
 
 {{< callout info >}}
@@ -1082,9 +1080,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
 #### Using function with `popperConfig`
 
 ```js
-var dropdown = new bootstrap.Dropdown(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
+const dropdown = new bootstrap.Dropdown(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
     // use defaultBsPopperConfig if needed...
     // return newPopperConfig
   }
@@ -1119,8 +1117,8 @@ All dropdown events are fired at the toggling element and then bubbled up. So yo
 {{< /bs-table >}}
 
 ```js
-var myDropdown = document.getElementById('myDropdown')
-myDropdown.addEventListener('show.bs.dropdown', function () {
+const myDropdown = document.getElementById('myDropdown')
+myDropdown.addEventListener('show.bs.dropdown', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md
index c566a3138e..45d65ddc01 100644
--- a/site/content/docs/5.1/components/list-group.md
+++ b/site/content/docs/5.1/components/list-group.md
@@ -405,11 +405,11 @@ You can activate a list group navigation without writing any JavaScript by simpl
 Enable tabbable list item via JavaScript (each list item needs to be activated individually):
 
 ```js
-var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab a'))
-triggerTabList.forEach(function (triggerEl) {
-  var tabTrigger = new bootstrap.Tab(triggerEl)
+const triggerTabList = document.querySelectorAll('#myTab a')
+triggerTabList.forEach(triggerEl => {
+  const tabTrigger = new bootstrap.Tab(triggerEl)
 
-  triggerEl.addEventListener('click', function (event) {
+  triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
@@ -419,10 +419,10 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual list item in several ways:
 
 ```js
-var triggerEl = document.querySelector('#myTab a[href="#profile"]')
+const triggerEl = document.querySelector('#myTab a[href="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
-var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
+const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
 ```
 
@@ -461,8 +461,8 @@ Activates a list item element and content container. Tab should have either a `d
 </div>
 
 <script>
-  var firstTabEl = document.querySelector('#myTab a:last-child')
-  var firstTab = new bootstrap.Tab(firstTabEl)
+  const firstTabEl = document.querySelector('#myTab a:last-child')
+  const firstTab = new bootstrap.Tab(firstTabEl)
 
   firstTab.show()
 </script>
@@ -473,10 +473,9 @@ Activates a list item element and content container. Tab should have either a `d
 Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
 
 ```js
-  var someListItemEl = document.querySelector('#someListItem')
-  var tab = new bootstrap.Tab(someListItemEl)
+const tab = new bootstrap.Tab('#someListItem')
 
-  tab.show()
+tab.show()
 ```
 
 #### dispose
@@ -488,8 +487,7 @@ Destroys an element's tab.
 *Static* method which allows you to get the tab instance associated with a DOM element
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
+const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
 ```
 
 #### getOrCreateInstance
@@ -497,8 +495,7 @@ var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan
 *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
+const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
 ```
 
 ### Events
@@ -522,11 +519,11 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
 {{< /bs-table >}}
 
 ```js
-var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
-tabElms.forEach(function(tabElm) {
-  tabElm.addEventListener('shown.bs.tab', function (event) {
+const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
+tabElms.forEach(tabElm => {
+  tabElm.addEventListener('shown.bs.tab', event => {
     event.target // newly activated tab
     event.relatedTarget // previous active tab
   })
-}
+})
 ```
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md
index 011aee2f46..2db62d3bb4 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -18,10 +18,10 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
 
 ```js
-var myModal = document.getElementById('myModal')
-var myInput = document.getElementById('myInput')
+const myModal = document.getElementById('myModal')
+const myInput = document.getElementById('myInput')
 
-myModal.addEventListener('shown.bs.modal', function () {
+myModal.addEventListener('shown.bs.modal', () => {
   myInput.focus()
 })
 ```
@@ -478,20 +478,20 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 {{< /example >}}
 
 ```js
-var exampleModal = document.getElementById('exampleModal')
-exampleModal.addEventListener('show.bs.modal', function (event) {
+const exampleModal = document.getElementById('exampleModal')
+exampleModal.addEventListener('show.bs.modal', event => {
   // Button that triggered the modal
-  var button = event.relatedTarget
+  const button = event.relatedTarget
   // Extract info from data-bs-* attributes
-  var recipient = button.getAttribute('data-bs-whatever')
+  const recipient = button.getAttribute('data-bs-whatever')
   // If necessary, you could initiate an AJAX request here
   // and then do the updating in a callback.
   //
   // Update the modal's content.
-  var modalTitle = exampleModal.querySelector('.modal-title')
-  var modalBodyInput = exampleModal.querySelector('.modal-body input')
+  const modalTitle = exampleModal.querySelector('.modal-title')
+  const modalBodyInput = exampleModal.querySelector('.modal-body input')
 
-  modalTitle.textContent = 'New message to ' + recipient
+  modalTitle.textContent = `New message to ${recipient}`
   modalBodyInput.value = recipient
 })
 ```
@@ -815,7 +815,9 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
 Create a modal with a single line of JavaScript:
 
 ```js
-var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
+const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
+// or
+const myModalAlternative = new bootstrap.Modal('#myModal', options)
 ```
 
 ### Options
@@ -843,7 +845,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
 Activates your content as a modal. Accepts an optional options `object`.
 
 ```js
-var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
+const myModal = new bootstrap.Modal('#myModal', {
   keyboard: false
 })
 ```
@@ -852,7 +854,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
 | Method | Description |
 | --- | --- |
 | `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
-| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
 | `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
 | `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
 | `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
@@ -875,8 +877,8 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
 {{< /bs-table >}}
 
 ```js
-var myModalEl = document.getElementById('myModal')
-myModalEl.addEventListener('hidden.bs.modal', function (event) {
+const myModalEl = document.getElementById('myModal')
+myModalEl.addEventListener('hidden.bs.modal', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
index e8994fd0c9..d43058b33e 100644
--- a/site/content/docs/5.1/components/navs-tabs.md
+++ b/site/content/docs/5.1/components/navs-tabs.md
@@ -553,11 +553,11 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 ```js
-var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button'))
-triggerTabList.forEach(function (triggerEl) {
-  var tabTrigger = new bootstrap.Tab(triggerEl)
+const triggerTabList = document.querySelectorAll('#myTab button')
+triggerTabList.forEach(triggerEl => {
+  const tabTrigger = new bootstrap.Tab(triggerEl)
 
-  triggerEl.addEventListener('click', function (event) {
+  triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
@@ -567,10 +567,10 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual tabs in several ways:
 
 ```js
-var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
+const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
-var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
+const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
 ```
 
@@ -621,8 +621,8 @@ Activates a tab element and content container. Tab should have either a `data-bs
 </div>
 
 <script>
-  var firstTabEl = document.querySelector('#myTab li:last-child button')
-  var firstTab = new bootstrap.Tab(firstTabEl)
+  const firstTabEl = document.querySelector('#myTab li:last-child button')
+  const firstTab = new bootstrap.Tab(firstTabEl)
 
   firstTab.show()
 </script>
@@ -633,10 +633,10 @@ Activates a tab element and content container. Tab should have either a `data-bs
 Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
 
 ```js
-  var someTabTriggerEl = document.querySelector('#someTabTrigger')
-  var tab = new bootstrap.Tab(someTabTriggerEl)
+const someTabTriggerEl = document.querySelector('#someTabTrigger')
+const tab = new bootstrap.Tab(someTabTriggerEl)
 
-  tab.show()
+tab.show()
 ```
 
 #### dispose
@@ -648,8 +648,7 @@ Destroys an element's tab.
 *Static* method which allows you to get the tab instance associated with a DOM element
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
+const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
 ```
 
 #### getOrCreateInstance
@@ -657,8 +656,7 @@ var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan
 *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
+const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
 ```
 
 ### Events
@@ -682,8 +680,8 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 {{< /bs-table >}}
 
 ```js
-var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
-tabEl.addEventListener('shown.bs.tab', function (event) {
+const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
+tabEl.addEventListener('shown.bs.tab', event => {
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 5df9aecc1e..0a487b3b60 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -271,10 +271,8 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
 Enable manually with:
 
 ```js
-var offcanvasElementList = Array.prototype.slice.call(document.querySelectorAll('.offcanvas'))
-var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
-  return new bootstrap.Offcanvas(offcanvasEl)
-})
+const offcanvasElementList = document.querySelectorAll('.offcanvas')
+const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
 ```
 
 ### Options
@@ -302,8 +300,7 @@ Activates your content as an offcanvas element. Accepts an optional options `obj
 You can create an offcanvas instance with the constructor, for example:
 
 ```js
-var myOffcanvas = document.getElementById('myOffcanvas')
-var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
+const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
 ```
 
 {{< bs-table "table" >}}
@@ -331,8 +328,8 @@ Bootstrap's offcanvas class exposes a few events for hooking into offcanvas func
 {{< /bs-table >}}
 
 ```js
-var myOffcanvas = document.getElementById('myOffcanvas')
-myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
+const myOffcanvas = document.getElementById('myOffcanvas')
+myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index 7dce915635..a9ff961c26 100644
--- a/site/content/docs/5.1/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -38,10 +38,8 @@ Keep reading to see how popovers work with some examples.
 As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute, like so:
 
 ```js
-var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-  return new bootstrap.Popover(popoverTriggerEl)
-})
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
 ```
 
 ### Live demo
@@ -76,7 +74,7 @@ Four options are available: top, right, bottom, and left. Directions are mirrore
 When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
 
 ```js
-var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
+const popover = new bootstrap.Popover('.example-popover', {
   container: 'body'
 })
 ```
@@ -114,7 +112,7 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
 {{< /example >}}
 
 ```js
-var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
+const popover = new bootstrap.Popover('.popover-dismiss', {
   trigger: 'focus'
 })
 ```
@@ -150,8 +148,8 @@ As part of Bootstrap’s evolving CSS variables approach, popovers now use local
 Enable popovers via JavaScript:
 
 ```js
-var exampleEl = document.getElementById('example')
-var popover = new bootstrap.Popover(exampleEl, options)
+const exampleEl = document.getElementById('example')
+const popover = new bootstrap.Popover(exampleEl, options)
 ```
 
 {{< callout warning >}}
@@ -207,9 +205,9 @@ Options for individual popovers can alternatively be specified through the use o
 #### Using function with `popperConfig`
 
 ```js
-var popover = new bootstrap.Popover(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
+const popover = new bootstrap.Popover(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
     // use defaultBsPopperConfig if needed...
     // return newPopperConfig
   }
@@ -241,8 +239,7 @@ var popover = new bootstrap.Popover(element, {
 
 ```js
 // getOrCreateInstance example
-var exampleTriggerEl = document.getElementById('example')
-var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
+const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
 
 // setContent example
 myPopover.setContent({
@@ -269,8 +266,8 @@ The `setContent` method accepts an `object` argument, where each property-key is
 {{< /bs-table >}}
 
 ```js
-var myPopoverTrigger = document.getElementById('myPopover')
-myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
+const myPopoverTrigger = document.getElementById('myPopover')
+myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md
index e48cc06f27..21b6a5e2f4 100644
--- a/site/content/docs/5.1/components/scrollspy.md
+++ b/site/content/docs/5.1/components/scrollspy.md
@@ -319,7 +319,7 @@ To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="sc
 ### Via JavaScript
 
 ```js
-var scrollSpy = new bootstrap.ScrollSpy(document.body, {
+const scrollSpy = new bootstrap.ScrollSpy(document.body, {
   target: '#navbar-example'
 })
 ```
@@ -371,10 +371,9 @@ To keep backwards compatibility, we will continue to parse a given `offset` to `
 Here's an example using the refresh method:
 
 ```js
-var dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
-dataSpyList.forEach(function (dataSpyEl) {
-  bootstrap.ScrollSpy.getInstance(dataSpyEl)
-    .refresh()
+const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
+dataSpyList.forEach(dataSpyEl => {
+  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
 })
 ```
 
@@ -387,8 +386,8 @@ dataSpyList.forEach(function (dataSpyEl) {
 {{< /bs-table >}}
 
 ```js
-var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
-firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
+const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
+firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 32a0f2f413..02fdff2d32 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -88,11 +88,11 @@ Click the button below to show a toast (positioned with our utilities in the low
 We use the following JavaScript to trigger our live toast demo:
 
 ```js
-var toastTrigger = document.getElementById('liveToastBtn')
-var toastLiveExample = document.getElementById('liveToast')
+const toastTrigger = document.getElementById('liveToastBtn')
+const toastLiveExample = document.getElementById('liveToast')
 if (toastTrigger) {
-  toastTrigger.addEventListener('click', function () {
-    var toast = new bootstrap.Toast(toastLiveExample)
+  toastTrigger.addEventListener('click', () => {
+    const toast = new bootstrap.Toast(toastLiveExample)
 
     toast.show()
   })
@@ -343,10 +343,8 @@ As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS
 Initialize toasts via JavaScript:
 
 ```js
-var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
-var toastList = toastElList.map(function (toastEl) {
-  return new bootstrap.Toast(toastEl, option)
-})
+const toastElList = document.querySelectorAll('.toast')
+const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
 ```
 
 ### Triggers
@@ -379,8 +377,8 @@ var toastList = toastElList.map(function (toastEl) {
 | `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
 | `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
 | `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
-| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: `var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance|
-| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized.  <br>`var myToastEl = document.getElementById('myToastEl')`  `var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance |
+| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance|
+| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized.  <br>`const myToastEl = document.getElementById('myToastEl')`  `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance |
 {{< /bs-table >}}
 
 ### Events
@@ -395,8 +393,8 @@ var toastList = toastElList.map(function (toastEl) {
 {{< /bs-table >}}
 
 ```js
-var myToastEl = document.getElementById('myToast')
-myToastEl.addEventListener('hidden.bs.toast', function () {
+const myToastEl = document.getElementById('myToast')
+myToastEl.addEventListener('hidden.bs.toast', () => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index f913ff5fea..458301620a 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -37,10 +37,8 @@ Got all that? Great, let's see how they work with some examples.
 As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
 
 ```js
-var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-  return new bootstrap.Tooltip(tooltipTriggerEl)
-})
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 ```
 
 ### Tooltips on links
@@ -139,8 +137,8 @@ The tooltip plugin generates content and markup on demand, and by default places
 Trigger the tooltip via JavaScript:
 
 ```js
-var exampleEl = document.getElementById('example')
-var tooltip = new bootstrap.Tooltip(exampleEl, options)
+const exampleEl = document.getElementById('example')
+const tooltip = new bootstrap.Tooltip(exampleEl, options)
 ```
 
 {{< callout warning >}}
@@ -149,8 +147,7 @@ var tooltip = new bootstrap.Tooltip(exampleEl, options)
 Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
 
 ```js
-var exampleEl = document.getElementById('example')
-var tooltip = new bootstrap.Tooltip(exampleEl, {
+const tooltip = new bootstrap.Tooltip('#example', {
   boundary: document.body // or document.querySelector('#boundary')
 })
 ```
@@ -233,9 +230,9 @@ Options for individual tooltips can alternatively be specified through the use o
 #### Using function with `popperConfig`
 
 ```js
-var tooltip = new bootstrap.Tooltip(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
+const tooltip = new bootstrap.Tooltip(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
     // use defaultBsPopperConfig if needed...
     // return newPopperConfig
   }
@@ -265,9 +262,7 @@ var tooltip = new bootstrap.Tooltip(element, {
 {{< /bs-table >}}
 
 ```js
-// getOrCreateInstance example
-var exampleTriggerEl = document.getElementById('example')
-var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
+const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
 
 // setContent example
 tooltip.setContent({ '.tooltip-inner': 'another title' })
@@ -291,10 +286,10 @@ The `setContent` method accepts an `object` argument, where each property-key is
 {{< /bs-table >}}
 
 ```js
-var myTooltipEl = document.getElementById('myTooltip')
-var tooltip = new bootstrap.Tooltip(myTooltipEl)
+const myTooltipEl = document.getElementById('myTooltip')
+const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
 
-myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
+myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
   // do something...
 })
 
diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md
index fc61728ce0..b5e8de7ee2 100644
--- a/site/content/docs/5.1/customize/optimize.md
+++ b/site/content/docs/5.1/customize/optimize.md
@@ -21,6 +21,7 @@ Bootstrap's JavaScript includes every component in our primary dist files (`boot
 
 For instance, assuming you're using your own JavaScript bundler like Webpack or Rollup, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:
 
+<!-- eslint-skip -->
 ```js
 // Import just what we need
 
@@ -45,6 +46,7 @@ This way, you're not including any JavaScript you don't intend to use for compon
 
 Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following:
 
+<!-- eslint-skip -->
 ```js
 import Modal from 'bootstrap/js/dist/modal'
 
diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md
index 8ee4289211..5e43210344 100644
--- a/site/content/docs/5.1/getting-started/javascript.md
+++ b/site/content/docs/5.1/getting-started/javascript.md
@@ -59,9 +59,9 @@ Bootstrap provides custom events for most plugins' unique actions. Generally, th
 All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
 
 ```js
-var myModal = document.getElementById('myModal')
+const myModal = document.getElementById('myModal')
 
-myModal.addEventListener('show.bs.modal', function (event) {
+myModal.addEventListener('show.bs.modal', event => {
   if (!data) {
     return event.preventDefault() // stops modal from being shown
   }
@@ -74,7 +74,7 @@ myModal.addEventListener('show.bs.modal', function (event) {
 Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
 
 ```js
-$('#myTab a').on('shown.bs.tab', function () {
+$('#myTab a').on('shown.bs.tab', () => {
   // do something...
 })
 ```
@@ -85,10 +85,10 @@ $('#myTab a').on('shown.bs.tab', function () {
 All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
 
 ```js
-var myModalEl = document.getElementById('myModal')
+const myModalEl = document.getElementById('myModal')
 
-var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
-var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
+const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
+const modal1 = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
 ```
 
 If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
@@ -98,8 +98,8 @@ If you'd like to get a particular plugin instance, each plugin exposes a `getIns
 You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
 
 ```js
-var modal = new bootstrap.Modal('#myModal')
-var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+const modal = new bootstrap.Modal('#myModal')
+const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
 ```
 
 ### Asynchronous functions and transitions
@@ -109,9 +109,9 @@ All programmatic API methods are **asynchronous** and return to the caller once
 In order to execute an action once the transition is complete, you can listen to the corresponding event.
 
 ```js
-var myCollapseEl = document.getElementById('myCollapse')
+const myCollapseEl = document.getElementById('myCollapse')
 
-myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
+myCollapseEl.addEventListener('shown.bs.collapse', event => {
   // Action to execute once the collapsible area is expanded
 })
 ```
@@ -119,10 +119,10 @@ myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
 In addition a method call on a **transitioning component will be ignored**.
 
 ```js
-var myCarouselEl = document.getElementById('myCarousel')
-var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
+const myCarouselEl = document.getElementById('myCarousel')
+const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
 
-myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
+myCarouselEl.addEventListener('slid.bs.carousel', event => {
   carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
 })
 
@@ -144,7 +144,7 @@ bootstrap.Modal.Default.keyboard = false
 Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
 
 ```js
-var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
 ```
 
@@ -173,8 +173,8 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
 The default `allowList` value is the following:
 
 ```js
-var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
-var DefaultAllowlist = {
+const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
+const DefaultAllowlist = {
   // Global attributes allowed on any supplied element below.
   '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
   a: ['target', 'href', 'title', 'rel'],
@@ -212,7 +212,7 @@ var DefaultAllowlist = {
 If you want to add new values to this default `allowList` you can do the following:
 
 ```js
-var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
+const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
 
 // To allow table elements
 myDefaultAllowList.table = []
@@ -222,16 +222,16 @@ myDefaultAllowList.td = ['data-bs-option']
 
 // You can push your custom regex to validate your attributes.
 // Be careful about your regular expressions being too lax
-var myCustomRegex = /^data-my-app-[\w-]+/
+const myCustomRegex = /^data-my-app-[\w-]+/
 myDefaultAllowList['*'].push(myCustomRegex)
 ```
 
 If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
 
 ```js
-var yourTooltipEl = document.getElementById('yourTooltip')
-var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
-  sanitizeFn: function (content) {
+const yourTooltipEl = document.getElementById('yourTooltip')
+const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
+  sanitizeFn(content) {
     return DOMPurify.sanitize(content)
   }
 })
diff --git a/site/content/docs/5.1/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md
index fe5d9da32b..fe83f381ae 100644
--- a/site/content/docs/5.1/getting-started/parcel.md
+++ b/site/content/docs/5.1/getting-started/parcel.md
@@ -36,6 +36,7 @@ project-name/
 
 Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually `src/index.js`). You can import all our plugins in one file or separately if you require only a subset of them.
 
+<!-- eslint-skip -->
 ```js
 // Import all plugins
 import * as bootstrap from 'bootstrap';
diff --git a/site/content/docs/5.1/getting-started/webpack.md b/site/content/docs/5.1/getting-started/webpack.md
index b87460ebe1..3c6c865041 100644
--- a/site/content/docs/5.1/getting-started/webpack.md
+++ b/site/content/docs/5.1/getting-started/webpack.md
@@ -14,6 +14,7 @@ toc: true
 
 Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
 
+<!-- eslint-skip -->
 ```js
 import 'bootstrap';
 
@@ -23,6 +24,7 @@ import * as bootstrap from 'bootstrap';
 
 Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:
 
+<!-- eslint-skip -->
 ```js
 import Alert from 'bootstrap/js/dist/alert';
 
@@ -48,6 +50,7 @@ First, create your own `_custom.scss` and use it to override the [built-in custo
 
 For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
 
+<!-- eslint-skip -->
 ```js
 // ...
 {
@@ -66,8 +69,8 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
       // if you use postcss 7.x skip the key
       postcssOptions: {
         // postcss plugins, can be exported to postcss.config.js
-        plugins: function () {
-          return [
+        plugins: () => {
+          [
             require('autoprefixer')
           ];
         }
@@ -85,6 +88,7 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
 
 Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:
 
+<!-- eslint-skip -->
 ```js
 import 'bootstrap/dist/css/bootstrap.min.css';
 ```
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index 21b965e567..99471fda7c 100644
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -490,8 +490,8 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
 - **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
 
   ```js
-  var modal = new bootstrap.Modal('#myModal')
-  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+  const modal = new bootstrap.Modal('#myModal')
+  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
   ```
 
 - `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**