From e9c5b53e0f0448aaff7b28cde113c3834c908ad1 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sat, 13 Mar 2021 14:30:29 +0100
Subject: [PATCH] Fixed all references of legacy attribute lists syntax

---
 docs/insiders.md                      |  6 ++--
 docs/reference/admonitions.md         | 24 ++++++++--------
 docs/reference/buttons.md             | 12 ++++----
 docs/reference/code-blocks.md         | 40 +++++++++++++--------------
 docs/reference/diagrams.md            |  4 +--
 docs/reference/formatting.md          |  2 +-
 docs/reference/icons-emojis.md        | 16 +++++------
 docs/reference/images.md              | 12 ++++----
 docs/reference/lists.md               |  4 +--
 docs/setup/adding-a-git-repository.md |  8 +++---
 docs/setup/changing-the-colors.md     |  8 +++---
 docs/setup/setting-up-navigation.md   | 18 ++++++------
 docs/setup/setting-up-site-search.md  | 12 ++++----
 docs/setup/setting-up-the-footer.md   | 14 +++++-----
 14 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/docs/insiders.md b/docs/insiders.md
index 6c45335ac..95f0f8773 100644
--- a/docs/insiders.md
+++ b/docs/insiders.md
@@ -2,7 +2,7 @@
 template: overrides/main.html
 ---
 
-# <span hidden>Insiders</span> :logo: :material-plus: :octicons-heart-fill-24:{: .mdx-heart }
+# <span hidden>Insiders</span> :logo: :material-plus: :octicons-heart-fill-24:{ .mdx-heart }
 
 Material for MkDocs uses the _sponsorware_ release strategy, which means
 that _new features are first exclusively released to sponsors_ as part of
@@ -89,7 +89,7 @@ You can cancel your sponsorship anytime.[^3]
     through Stripe. As we don't receive any information regarding your payment,
     and GitHub doesn't offer refunds, sponsorships are non-refundable.
 
-[:octicons-heart-fill-24:{: .mdx-heart } &nbsp; Join our <span class="mdx-insiders-count"></span> awesome sponsors][5]{: .md-button .md-button--primary .mdx-insiders-button }
+[:octicons-heart-fill-24:{ .mdx-heart } &nbsp; Join our <span class="mdx-insiders-count"></span> awesome sponsors][5]{ .md-button .md-button--primary .mdx-insiders-button }
 
 <div class="mdx-insiders-container" markdown="1" hidden>
   <div class="mdx-insiders-list"></div>
@@ -129,7 +129,7 @@ The following features are currently exclusively available to sponsors:
 
 _New features are added to this list every few weeks, so be sure to come back
 from time to time to learn about what's new, or follow [@squidfunk on 
-:fontawesome-brands-twitter:{: .twitter } Twitter][6] to stay updated._
+:fontawesome-brands-twitter:{ .twitter } Twitter][6] to stay updated._
 
   [6]: https://twitter.com/squidfunk
 
diff --git a/docs/reference/admonitions.md b/docs/reference/admonitions.md
index ef5575bc4..bc925f4e6 100644
--- a/docs/reference/admonitions.md
+++ b/docs/reference/admonitions.md
@@ -287,7 +287,7 @@ viewports._
 Following is a list of type qualifiers provided by Material for MkDocs, whereas
 the default type, and thus fallback for unknown type qualifiers, is `note`:
 
-`note`{: #note }, `seealso`
+`note`{ #note }, `seealso`
 
 :   !!! note
 
@@ -295,7 +295,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`abstract`{: #abstract }, `summary`, `tldr`
+`abstract`{ #abstract }, `summary`, `tldr`
 
 :   !!! abstract
 
@@ -303,7 +303,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`info`{: #info }, `todo`
+`info`{ #info }, `todo`
 
 :   !!! info
 
@@ -311,7 +311,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`tip`{: #tip }, `hint`, `important`
+`tip`{ #tip }, `hint`, `important`
 
 :   !!! tip
 
@@ -319,7 +319,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`success`{: #success }, `check`, `done`
+`success`{ #success }, `check`, `done`
 
 :   !!! success
 
@@ -327,7 +327,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`question`{: #question }, `help`, `faq`
+`question`{ #question }, `help`, `faq`
 
 :   !!! question
 
@@ -335,7 +335,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`warning`{: #warning }, `caution`, `attention`
+`warning`{ #warning }, `caution`, `attention`
 
 :   !!! warning
 
@@ -343,7 +343,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`failure`{: #failure }, `fail`, `missing`
+`failure`{ #failure }, `fail`, `missing`
 
 :   !!! failure
 
@@ -351,7 +351,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`danger`{: #danger }, `error`
+`danger`{ #danger }, `error`
 
 :   !!! danger
 
@@ -359,7 +359,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`bug`{: #bug }
+`bug`{ #bug }
 
 :   !!! bug
 
@@ -367,7 +367,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`example`{: #example }
+`example`{ #example }
 
 :   !!! example
 
@@ -375,7 +375,7 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
         euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
         purus auctor massa, nec semper lorem quam in massa.
 
-`quote`{: #quote }, `cite`
+`quote`{ #quote }, `cite`
 
 :   !!! quote
 
diff --git a/docs/reference/buttons.md b/docs/reference/buttons.md
index 4e670b2ae..6370a9e46 100644
--- a/docs/reference/buttons.md
+++ b/docs/reference/buttons.md
@@ -34,12 +34,12 @@ the selected [primary color][3].
 _Example_:
 
 ``` markdown
-[Subscribe to our mailing list](#){: .md-button }
+[Subscribe to our mailing list](#){ .md-button }
 ```
 
 _Result_:
 
-[Subscribe to our mailing list][4]{: .md-button }
+[Subscribe to our mailing list][4]{ .md-button }
 
   [2]: #attribute-list
   [3]: ../setup/changing-the-colors.md#primary-color
@@ -54,12 +54,12 @@ CSS classes.
 _Example_:
 
 ``` markdown
-[Subscribe to our mailing list](#){: .md-button .md-button--primary }
+[Subscribe to our mailing list](#){ .md-button .md-button--primary }
 ```
 
 _Result_:
 
-[Subscribe to our mailing list][4]{: .md-button .md-button--primary }
+[Subscribe to our mailing list][4]{ .md-button .md-button--primary }
 
   [5]: ../index.md
 
@@ -72,12 +72,12 @@ theme][7].
 _Example_:
 
 ``` markdown
-[Submit :fontawesome-solid-paper-plane:](#){: .md-button .md-button--primary }
+[Submit :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }
 ```
 
 _Result_:
 
-[Submit :fontawesome-solid-paper-plane:][4]{: .md-button .md-button--primary }
+[Submit :fontawesome-solid-paper-plane:][4]{ .md-button .md-button--primary }
 
   [6]: icons-emojis.md#using-icons
   [7]: icons-emojis.md#search
diff --git a/docs/reference/code-blocks.md b/docs/reference/code-blocks.md
index 6d8f90f7a..982cc00d3 100644
--- a/docs/reference/code-blocks.md
+++ b/docs/reference/code-blocks.md
@@ -22,7 +22,7 @@ The [Highlight][3] extension, which is part of [Python Markdown Extensions][5],
 integrates with Material for MkDocs and provides several options for
 configuring syntax highlighting of code blocks:
 
-`use_pygments`{: #use-pygments }
+`use_pygments`{ #use-pygments }
 
 :   :octicons-milestone-24: Default: `true` – This option allows to control
     whether highlighting should be carried out during build time by
@@ -71,7 +71,7 @@ configuring syntax highlighting of code blocks:
 
         Note that Highlight.js has no affiliation with the Highlight extension.
 
-`linenums`{: #linenums }
+`linenums`{ #linenums }
 
 :   :octicons-milestone-24: Default: `false` – This option will add line numbers
     to _all_ code blocks. If you wish to add line numbers to _some_, but not all
@@ -84,7 +84,7 @@ configuring syntax highlighting of code blocks:
           linenums: true
     ```
 
-`linenums_style`{: #linenums-style }
+`linenums_style`{ #linenums-style }
 
 :   :octicons-milestone-24: Default: `table` – The Highlight extension provides
     three ways to add line numbers, all of which are supported by Material for
@@ -210,7 +210,7 @@ import tensorflow as tf
 
 [:octicons-file-code-24: Source][18] ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][18]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][18]{ .mdx-insiders }
 
 Annotations offer a comfortable and friendly way to attach explanations to
 arbitrary sections of code blocks by adding simple markers within block/inline
@@ -226,7 +226,7 @@ class, after the three backticks.
 _Example_:
 
 ```` markdown
-``` {: .js .annotate }
+``` { .js .annotate }
 document$.subscribe(function() { // (1)
   var tables = document.querySelectorAll(/* (2) */ "article table")
   tables.forEach(function(table) {
@@ -394,24 +394,24 @@ If [Pygments][26] is used, Material for MkDocs provides the [styles for code
 blocks][25], which are built with a custom and well-balanced palette that works
 equally well for both [color schemes][27]:
 
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-number-color) " } `--md-code-hl-number-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-special-color) " } `--md-code-hl-special-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-function-color) " } `--md-code-hl-function-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-constant-color) " } `--md-code-hl-constant-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-keyword-color) " } `--md-code-hl-keyword-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-string-color) " } `--md-code-hl-string-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-name-color) " } `--md-code-hl-name-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-operator-color) " } `--md-code-hl-operator-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-punctuation-color) " } `--md-code-hl-punctuation-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-comment-color) " } `--md-code-hl-comment-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-generic-color) " } `--md-code-hl-generic-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-variable-color) " } `--md-code-hl-variable-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-number-color) " } `--md-code-hl-number-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-special-color) " } `--md-code-hl-special-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-function-color) " } `--md-code-hl-function-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-constant-color) " } `--md-code-hl-constant-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-keyword-color) " } `--md-code-hl-keyword-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-string-color) " } `--md-code-hl-string-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-name-color) " } `--md-code-hl-name-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-operator-color) " } `--md-code-hl-operator-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-punctuation-color) " } `--md-code-hl-punctuation-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-comment-color) " } `--md-code-hl-comment-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-generic-color) " } `--md-code-hl-generic-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-variable-color) " } `--md-code-hl-variable-color`
 
 Code block foreground, background and line highlight colors are defined via:
 
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-fg-color) " } `--md-code-fg-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-bg-color) " } `--md-code-bg-color`
-- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-color) " } `--md-code-hl-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-fg-color) " } `--md-code-fg-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-bg-color) " } `--md-code-bg-color`
+- :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-color) " } `--md-code-hl-color`
 
 Let's say you want to change the color of `#!js "strings"`. While there are
 several [types of string tokens][28], Material for MkDocs assigns a single color
diff --git a/docs/reference/diagrams.md b/docs/reference/diagrams.md
index b56b56af1..e83e0fcfe 100644
--- a/docs/reference/diagrams.md
+++ b/docs/reference/diagrams.md
@@ -17,7 +17,7 @@ popular and flexible solution for drawing diagrams.
 
 [:octicons-file-code-24: Source][2] ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][2]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][2]{ .mdx-insiders }
 
 The [SuperFences][3] extension, which is part of [Python Markdown
 Extensions][4], allows for adding __custom fences__, which can be used to
@@ -89,7 +89,7 @@ graph LR
 
 _Result_:
 
-[![Diagram][12]{: style="width: 100%; max-width: 594px" }][12]
+[![Diagram][12]{ style="width: 100%; max-width: 594px" }][12]
 
 _See the [official documentation][1] to learn about all available diagram 
 types._
diff --git a/docs/reference/formatting.md b/docs/reference/formatting.md
index 9a94be3a4..d52b206db 100644
--- a/docs/reference/formatting.md
+++ b/docs/reference/formatting.md
@@ -28,7 +28,7 @@ markdown_extensions:
 
 The following options are supported:
 
-`mode`{: #mode }
+`mode`{ #mode }
 
 :   :octicons-milestone-24: Default: `view` – This option defines how the markup 
     should be parsed, i.e. whether to just `view` all suggest changes, or
diff --git a/docs/reference/icons-emojis.md b/docs/reference/icons-emojis.md
index cd618656e..00a8e8477 100644
--- a/docs/reference/icons-emojis.md
+++ b/docs/reference/icons-emojis.md
@@ -160,16 +160,16 @@ Then, simply add the CSS class to the icon.
 _Example_:
 
 ``` markdown
-- :fontawesome-brands-medium:{: .medium } – Medium
-- :fontawesome-brands-twitter:{: .twitter } – Twitter
-- :fontawesome-brands-facebook:{: .facebook } – Facebook
+- :fontawesome-brands-medium:{ .medium } – Medium
+- :fontawesome-brands-twitter:{ .twitter } – Twitter
+- :fontawesome-brands-facebook:{ .facebook } – Facebook
 ```
 
 _Result_:
 
-- :fontawesome-brands-medium:{: .medium } – Medium
-- :fontawesome-brands-twitter:{: .twitter } – Twitter
-- :fontawesome-brands-facebook:{: .facebook } – Facebook
+- :fontawesome-brands-medium:{ .medium } – Medium
+- :fontawesome-brands-twitter:{ .twitter } – Twitter
+- :fontawesome-brands-facebook:{ .facebook } – Facebook
 
   [17]: #attribute-list
   [18]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
@@ -200,12 +200,12 @@ Then, simply add the CSS class to the icon.
 _Example_:
 
 ``` markdown
-:octicons-heart-fill-24:{: .heart }
+:octicons-heart-fill-24:{ .heart }
 ```
 
 _Result_:
 
-:octicons-heart-fill-24:{: .mdx-heart }
+:octicons-heart-fill-24:{ .mdx-heart }
 
   [20]: #with-colors
   [21]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
diff --git a/docs/reference/images.md b/docs/reference/images.md
index 6dbf42928..4e4ba28f2 100644
--- a/docs/reference/images.md
+++ b/docs/reference/images.md
@@ -38,12 +38,12 @@ adding the respective alignment directions via the `align` attribute, i.e.
     _Example_:
 
     ``` markdown
-    ![Placeholder](https://dummyimage.com/600x400/eee/aaa){: align=left }
+    ![Placeholder](https://dummyimage.com/600x400/eee/aaa){ align=left }
     ```
 
     _Result_:
 
-    ![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){: align=left width=300 }
+    ![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=left width=300 }
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
     nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
@@ -54,12 +54,12 @@ adding the respective alignment directions via the `align` attribute, i.e.
     _Example_:
 
     ``` markdown
-    ![Placeholder](https://dummyimage.com/600x400/eee/aaa){: align=right }
+    ![Placeholder](https://dummyimage.com/600x400/eee/aaa){ align=right }
     ```
 
     _Result_:
 
-    ![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){: align=right width=300 }
+    ![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=right width=300 }
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
     nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
@@ -101,12 +101,12 @@ enabled, images can be lazy-loaded by adding `loading=lazy`.
 _Example_:
 
 ``` markdown
-![Placeholder](https://dummyimage.com/600x400/eee/aaa){: loading=lazy }
+![Placeholder](https://dummyimage.com/600x400/eee/aaa){ loading=lazy }
 ```
 
 _Result_:
 
-![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){: loading=lazy width=300 }
+![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ loading=lazy width=300 }
 
   [4]: https://caniuse.com/#feat=loading-lazy-attr
   [5]: #image-alignment
diff --git a/docs/reference/lists.md b/docs/reference/lists.md
index 7afd1b6ba..3dfb52fa7 100644
--- a/docs/reference/lists.md
+++ b/docs/reference/lists.md
@@ -35,7 +35,7 @@ The [Tasklist][4] extension, which is part of [Python Markdown Extensions][5],
 adds support for lists with styled checkboxes, and provides several options for 
 configuring the style:
 
-`custom_checkbox`{: #custom-checkbox }
+`custom_checkbox`{ #custom-checkbox }
 
 :   :octicons-milestone-24: Default: `false` · This option toggles the rendering
     style of checkboxes, replacing native checkbox styles with beautiful icons, 
@@ -47,7 +47,7 @@ configuring the style:
           custom_checkbox: true
     ```
 
-`clickable_checkbox`{: #clickable-checkbox }
+`clickable_checkbox`{ #clickable-checkbox }
 
 :   :octicons-milestone-24: Default: `false` · This option toggles whether
     checkboxes are clickable. As the state is not persisted, the use of this 
diff --git a/docs/setup/adding-a-git-repository.md b/docs/setup/adding-a-git-repository.md
index d911616ab..ab485f85e 100644
--- a/docs/setup/adding-a-git-repository.md
+++ b/docs/setup/adding-a-git-repository.md
@@ -75,7 +75,7 @@ Some popular choices:
 ### Latest release
 
 [:octicons-file-code-24: Source][5] ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][5]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][5]{ .mdx-insiders }
 
 The visual appearance of the repository link has been improved as part of
 [Insiders][5], and will now automatically include the latest release tag which
@@ -146,7 +146,7 @@ plugins:
 
 The following options are supported:
 
-`enabled_if_env`{: #enabled_if_env }
+`enabled_if_env`{ #enabled_if_env }
 
 :   :octicons-milestone-24: Default: _none_ – This option defines whether the
     date is actually extracted from git, which makes it possible to disable
@@ -187,7 +187,7 @@ plugins:
 
 The following options are supported:
 
-`type`{: #type }
+`type`{ #type }
 
 :   :octicons-milestone-24: Default: `date` – This option allows to change the
     format of the date to be displayed. Valid values are `date`, `datetime`,
@@ -199,7 +199,7 @@ The following options are supported:
           type: date
     ```
 
-`fallback_to_build_date`{: #fallback_to_build_date }
+`fallback_to_build_date`{ #fallback_to_build_date }
 
 :   :octicons-milestone-24: Default: `false` – This option specifies whether
     the time when `mkdocs build` was executed should be used as a fallback when
diff --git a/docs/setup/changing-the-colors.md b/docs/setup/changing-the-colors.md
index 761d04b1b..c6bbc3974 100644
--- a/docs/setup/changing-the-colors.md
+++ b/docs/setup/changing-the-colors.md
@@ -184,7 +184,7 @@ _Click on a tile to change the accent color_:
 ### Color palette toggle
 
 [:octicons-file-code-24: Source][6] ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][6]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][6]{ .mdx-insiders }
 
 [Insiders][6] can easily add multiple color palettes, including a [scheme][8],
 [primary][9] and [accent][10] color each, and let the user choose. A color
@@ -233,7 +233,7 @@ The `toggle` field allows to specify an `icon` and `name` for each palette. The
 toggle is rendered next to the search bar and will cycle through all defined
 color palettes:
 
-`icon`{: #icon }
+`icon`{ #icon }
 
 :   :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
     This field must point to a valid icon path referencing [any icon bundled
@@ -245,7 +245,7 @@ color palettes:
     * :material-eye-outline: + :material-eye: – `material/eye-outline` + `material/eye`
     * :material-lightbulb-outline: + :material-lightbulb: – `material/lightbulb-outline` + `material/lightbulb`
 
-`name`{: #name }
+`name`{ #name }
 
 :   :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
     This field is used as the toggle's `title` attribute and should be set to a
@@ -271,7 +271,7 @@ properties). If you want to customize the colors beyond the palette (e.g. to
 use your brand-specific colors), you can add an [additional stylesheet][15] and
 tweak the values of the CSS variables.
 
-Let's say you're :fontawesome-brands-youtube:{: style="color: #EE0F0F" }
+Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
 __YouTube__, and want to set the primary color to your brand's palette. Just
 add:
 
diff --git a/docs/setup/setting-up-navigation.md b/docs/setup/setting-up-navigation.md
index 3b5a09390..375ceee48 100644
--- a/docs/setup/setting-up-navigation.md
+++ b/docs/setup/setting-up-navigation.md
@@ -45,7 +45,7 @@ _Material for MkDocs is the only MkDocs theme offering this feature._
 
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][9]{ .mdx-insiders }
 
 When _anchor tracking_ is enabled, the URL in the address bar is automatically
 updated with the active anchor as highlighted in the table of contents. Add the
@@ -97,7 +97,7 @@ theme:
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][9]{ .mdx-insiders }
 
 When _sticky tabs_ are enabled, navigation tabs will lock below the header and
 always remain visible when scrolling down. Just add the following two feature
@@ -182,7 +182,7 @@ theme:
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][9]{ .mdx-insiders }
 
 When _section index pages_ are enabled, documents can be directly attached to
 sections, which is particularly useful for providing overview pages. Add the
@@ -234,7 +234,7 @@ Note that it doesn't rely on third-party plugins[^2]._
 
 [:octicons-file-code-24: Source][9] ·
 :octicons-unlock-24: Feature flag ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][9]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][9]{ .mdx-insiders }
 
 A _back-to-top button_ can be shown when the user, after scrolling down, starts
 to scroll up again. It's rendered in the lower right corner of the viewport. Add
@@ -269,7 +269,7 @@ The [Table of contents][23] extension, which is part of the standard Markdown
 library, provides some options that are supported by Material for MkDocs to
 customize its appearance:
 
-`permalink`{: #permalink }
+`permalink`{ #permalink }
 
 :   :octicons-milestone-24: Default: `false` – This option adds an anchor link
     containing the paragraph symbol `¶` or another custom symbol at the end of
@@ -292,7 +292,7 @@ customize its appearance:
               permalink: ⚓︎
         ```
 
-`slugify`{: #slugify }
+`slugify`{ #slugify }
 
 :   :octicons-milestone-24: Default: `headerid.slugify` – This option allows for 
     customization of the slug function. For some languages, the default may not
@@ -315,7 +315,7 @@ customize its appearance:
               slugify: !!python/name:pymdownx.slugs.uslugify_cased
         ```
 
-`toc_depth`{: #toc_depth }
+`toc_depth`{ #toc_depth }
 
 :   :octicons-milestone-24: Default: `6` – Define the range of levels to be
     included in the table of contents. This may be useful for project
@@ -424,7 +424,7 @@ hide:
 Material for MkDocs includes several keyboard shortcuts that make it possible
 to navigate your project documentation via keyboard. There're two modes:
 
-`search`{: #search }
+`search`{ #search }
 
 :   This mode is active when the _search is focused_. It provides several key
     bindings to make search accessible and navigable via keyboard:
@@ -433,7 +433,7 @@ to navigate your project documentation via keyboard. There're two modes:
     * ++esc++ , ++tab++ : close search dialog
     * ++enter++ : follow selected result
 
-`global`{: #global }
+`global`{ #global }
 
 :   This mode is active when _search is not focussed_ and when there's no other
     focussed element that is susceptible to keyboard input. The following keys
diff --git a/docs/setup/setting-up-site-search.md b/docs/setup/setting-up-site-search.md
index 4ac73497d..06db3c936 100644
--- a/docs/setup/setting-up-site-search.md
+++ b/docs/setup/setting-up-site-search.md
@@ -30,7 +30,7 @@ plugins:
 
 The following options are supported:
 
-`lang`{: #lang }
+`lang`{ #lang }
 
 :   :octicons-milestone-24: Default: _automatically set_ – This option allows
     to include the language-specific stemmers provided by [lunr-languages][5].
@@ -91,7 +91,7 @@ The following options are supported:
         JavaScript payload by around 20kb (before `gzip`) and by another 15-30kb
         per language.
 
-`separator`{: #separator }
+`separator`{ #separator }
 
 :   :octicons-milestone-24: Default: _automatically set_ – The separator for
     indexing and query tokenization can be customized, making it possible to
@@ -104,7 +104,7 @@ The following options are supported:
           separator: '[\s\-\.]+'
     ```
 
-`prebuild_index`{: #prebuild-index }
+`prebuild_index`{ #prebuild-index }
 
 :   :octicons-milestone-24: Default: `false` · :octicons-beaker-24:
     Experimental – MkDocs can generate a [prebuilt index][7] of all pages during
@@ -137,7 +137,7 @@ them at your own risk._
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][8]{ .mdx-insiders }
 
 When _search suggestions_ are enabled, the search will display the likeliest
 completion for the last word, saving the user many key strokes by accepting the
@@ -174,7 +174,7 @@ A demo is worth a thousand words — check it out at
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][8]{ .mdx-insiders }
 
 When _search highlighting_ is enabled and a user clicks on a search result,
 Material for MkDocs will highlight all occurrences after following the link.
@@ -208,7 +208,7 @@ A demo is worth a thousand words — check it out at
 [:octicons-file-code-24: Source][8] ·
 :octicons-unlock-24: Feature flag ·
 :octicons-beaker-24: Experimental ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][8]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][8]{ .mdx-insiders }
 
 When _search sharing_ is activated, a :material-share-variant: share button is
 rendered next to the reset button, which allows to deep link to the current
diff --git a/docs/setup/setting-up-the-footer.md b/docs/setup/setting-up-the-footer.md
index 9b434fb7d..2e32acbe2 100644
--- a/docs/setup/setting-up-the-footer.md
+++ b/docs/setup/setting-up-the-footer.md
@@ -6,9 +6,9 @@ template: overrides/main.html
 
 The footer of your project documentation is a great place to add links to
 websites or platforms you or your company are using as additional marketing 
-channels, e.g. :fontawesome-brands-medium:{: style="color: #00AB6C" },
-:fontawesome-brands-twitter:{: style="color: #1DA1F2" } or
-:fontawesome-brands-facebook:{: style="color: #4267B2" }, which can be
+channels, e.g. :fontawesome-brands-medium:{ style="color: #00AB6C" },
+:fontawesome-brands-twitter:{ style="color: #1DA1F2" } or
+:fontawesome-brands-facebook:{ style="color: #4267B2" }, which can be
 configured via `mkdocs.yml`.
 
 ## Configuration
@@ -31,7 +31,7 @@ extra:
 
 For each entry, the following fields are available:
 
-`icon`{: #icon }
+`icon`{ #icon }
 
 :   :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
     This field must point to a valid icon path referencing [any icon bundled
@@ -51,7 +51,7 @@ For each entry, the following fields are available:
   [1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/social.html
   [2]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
 
-`link`{: #link }
+`link`{ #link }
 
 :   :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
     This field must contain a valid relative or absolute URL including the URI 
@@ -75,7 +75,7 @@ For each entry, the following fields are available:
               link: mailto:<email-address>
         ```
 
-`name`{: #name }
+`name`{ #name }
 
 :   :octicons-milestone-24: Default: _domain name from_ `link`_, if available_ –
     This field is used as the link's `title` attribute and can be set to a 
@@ -106,7 +106,7 @@ copyright: Copyright &copy; 2016 - 2020 Martin Donath
 ### Remove generator
 
 [:octicons-file-code-24: Source][4] ·
-[:octicons-heart-fill-24:{: .mdx-heart } Insiders only][4]{: .mdx-insiders }
+[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][4]{ .mdx-insiders }
 
 The footer displays a _Made with Material for MkDocs_ notice to denote how
 the site was generated. The notice can be removed with the following setting