Documentation

docs/reference/admonitions.md

@@ -24,9 +24,9 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Admonition]
+- [Admonition]{ data-preview="" }
-- [Details]
+- [Details]{ data-preview="" }
-- [SuperFences]
+- [SuperFences]{ data-preview="" }
 
   [Admonition]: ../setup/extensions/python-markdown.md#admonition
   [Details]: ../setup/extensions/python-markdown-extensions.md#details

docs/reference/annotations.md

@@ -23,9 +23,9 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Attribute Lists]
+- [Attribute Lists]{ data-preview="" }
-- [Markdown in HTML]
+- [Markdown in HTML]{ data-preview="" }
-- [SuperFences]
+- [SuperFences]{ data-preview="" }
 
   [Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
   [Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html

docs/reference/buttons.md

@@ -21,7 +21,7 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Attribute Lists]
+- [Attribute Lists]{ data-preview="" }
 
   [Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
 
@@ -44,7 +44,7 @@ In order to render a link as a button, suffix it with curly braces and add the
 </div>
 
   [primary color]: ../setup/changing-the-colors.md#primary-color
-  [accent color]: ../setup/changing-the-colors.md#accent-color 
+  [accent color]: ../setup/changing-the-colors.md#accent-color
   [Demo]: javascript:alert$.next("Demo")
 
 ### Adding primary buttons

docs/reference/code-blocks.md

@@ -34,10 +34,10 @@ JavaScript syntax highlighter.
 
 See additional configuration options:
 
-- [Highlight]
+- [Highlight]{ data-preview="" }
-- [InlineHilite]
+- [InlineHilite]{ data-preview="" }
-- [SuperFences]
+- [SuperFences]{ data-preview="" }
-- [Snippets]
+- [Snippets]{ data-preview="" }
 
   [Highlight]: ../setup/extensions/python-markdown-extensions.md#highlight
   [InlineHilite]: ../setup/extensions/python-markdown-extensions.md#inlinehilite

docs/reference/content-tabs.md

@@ -24,8 +24,8 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [SuperFences]
+- [SuperFences]{ data-preview="" }
-- [Tabbed]
+- [Tabbed]{ data-preview="" }
 
   [SuperFences]: ../setup/extensions/python-markdown-extensions.md#superfences
   [Tabbed]: ../setup/extensions/python-markdown-extensions.md#tabbed

docs/reference/data-tables.md

@@ -24,7 +24,7 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Tables]
+- [Tables]{ data-preview="" }
 
   [Tables]: ../setup/extensions/python-markdown.md#tables
 

docs/reference/footnotes.md

@@ -22,7 +22,7 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Footnotes]
+- [Footnotes]{ data-preview="" }
 
   [Footnotes]: ../setup/extensions/python-markdown.md#footnotes
 

docs/reference/formatting.md

@@ -4,8 +4,8 @@ icon: material/format-font
 
 # Formatting
 
-Material for MkDocs provides support for several HTML elements that can be used 
+Material for MkDocs provides support for several HTML elements that can be used
-to highlight sections of a document or apply specific formatting. Additionally, 
+to highlight sections of a document or apply specific formatting. Additionally,
 [Critic Markup] is supported, adding the ability to display suggested changes
 for a document.
 
@@ -14,7 +14,7 @@ for a document.
 ## Configuration
 
 This configuration enables support for keyboard keys, tracking changes in
-documents, defining sub- and superscript and highlighting text. Add the 
+documents, defining sub- and superscript and highlighting text. Add the
 following lines to `mkdocs.yml`:
 
 ``` yaml
@@ -28,9 +28,9 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Critic]
+- [Critic]{ data-preview="" }
-- [Caret, Mark & Tilde]
+- [Caret, Mark & Tilde]{ data-preview="" }
-- [Keys]
+- [Keys]{ data-preview="" }
 
   [Critic]: ../setup/extensions/python-markdown-extensions.md#critic
   [Caret, Mark & Tilde]: ../setup/extensions/python-markdown-extensions.md#caret-mark-tilde
@@ -40,7 +40,7 @@ See additional configuration options:
 
 ### Highlighting changes
 
-When [Critic] is enabled, [Critic Markup] can be used, which adds the ability to 
+When [Critic] is enabled, [Critic Markup] can be used, which adds the ability to
 highlight suggested changes, as well as add inline comments to a document:
 
 ``` title="Text with suggested changes"
@@ -78,7 +78,7 @@ Text can be <del class="critic">deleted</del> and replacement text
 
 ### Highlighting text
 
-When [Caret, Mark & Tilde] are enabled, text can be highlighted with a simple 
+When [Caret, Mark & Tilde] are enabled, text can be highlighted with a simple
 syntax, which is more convenient that directly using the corresponding
 [`mark`][mark], [`ins`][ins] and [`del`][del] HTML tags:
 
@@ -102,7 +102,7 @@ syntax, which is more convenient that directly using the corresponding
 
 ### Sub- and superscripts
 
-When [Caret & Tilde][Caret, Mark & Tilde] are enabled, text can be sub- and 
+When [Caret & Tilde][Caret, Mark & Tilde] are enabled, text can be sub- and
 superscripted with a simple syntax, which is more convenient than directly
 using the corresponding [`sub`][sub] and [`sup`][sup] HTML tags:
 

docs/reference/grids.md

@@ -26,8 +26,8 @@ markdown_extensions: # (1)!
 
 See additional configuration options:
 
-- [Attribute Lists]
+- [Attribute Lists]{ data-preview="" }
-- [Markdown in HTML]
+- [Markdown in HTML]{ data-preview="" }
 
   [icons and emojis]: icons-emojis.md
   [configured separately]: icons-emojis.md#configuration

docs/reference/images.md

@@ -23,8 +23,8 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Attribute Lists]
+- [Attribute Lists]{ data-preview="" }
-- [Markdown in HTML]
+- [Markdown in HTML]{ data-preview="" }
 
   [Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists
   [Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html

docs/reference/lists.md

@@ -24,8 +24,8 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Definition Lists]
+- [Definition Lists]{ data-preview="" }
-- [Tasklist]
+- [Tasklist]{ data-preview="" }
 
   [Definition Lists]: ../setup/extensions/python-markdown.md#definition-lists
   [Tasklist]: ../setup/extensions/python-markdown-extensions.md#tasklist
@@ -62,7 +62,7 @@ of lists can be nested inside each other:
 
 ### Using ordered lists
 
-Ordered lists must start with a number immediately followed by a dot. The 
+Ordered lists must start with a number immediately followed by a dot. The
 numbers do not need to be consecutive and can be all set to `1.`, as they will
 be re-numbered when rendered:
 

docs/reference/tooltips.md

@@ -25,9 +25,9 @@ markdown_extensions:
 
 See additional configuration options:
 
-- [Abbreviations]
+- [Abbreviations]{ data-preview="" }
-- [Attribute Lists]
+- [Attribute Lists]{ data-preview="" }
-- [Snippets]
+- [Snippets]{ data-preview="" }
 
   [Abbreviations]: ../setup/extensions/python-markdown.md#abbreviations
   [Attribute Lists]: ../setup/extensions/python-markdown.md#attribute-lists

material/overrides/hooks/shortcodes.py

@@ -113,6 +113,7 @@ def _resolve(file: File, page: Page):
 # Create badge
 def _badge(icon: str, text: str = "", type: str = ""):
     classes = f"mdx-badge mdx-badge--{type}" if type else "mdx-badge"
+    text = f"{text}{{ data-preview='' }}" if text.endswith(")") else text
     return "".join([
         f"<span class=\"{classes}\">",
         *([f"<span class=\"mdx-badge__icon\">{icon}</span>"] if icon else []),

src/overrides/hooks/shortcodes.py

@@ -113,6 +113,7 @@ def _resolve(file: File, page: Page):
 # Create badge
 def _badge(icon: str, text: str = "", type: str = ""):
     classes = f"mdx-badge mdx-badge--{type}" if type else "mdx-badge"
+    text = f"{text}{{ data-preview='' }}" if text.endswith(")") else text
     return "".join([
         f"<span class=\"{classes}\">",
         *([f"<span class=\"mdx-badge__icon\">{icon}</span>"] if icon else []),