How do I replicate the 'conventions' icons used in the Material-for-mkdocs documentation site?

[rathboma]

Hi everyone,

First, wow is this an amazing project. The docs produced are fantastic.

Quick question - I'd like to replicate the icons used in the project documentation, like these:

I can see in the code that they use this block to achieve this:

<!-- md:version 9.2.0 -->
<!-- md:plugin -->
<!-- md:flag experimental -->

I can't figure out if this is a built in feature? How would I achieve the same thing?

Thanks anyone for your help!

[kamilkrzyskow]

Hello @rathboma,
this was asked many times in different ways in the discussions, searching with conventions I got to this discussion:

• what it is? - Conventions #6045

To answer in short again:

0. This is currently a custom feature of the mkdocs-material docs, and isn't exported in a straightforward way for other users to use. However, this will likely change, as people often ask for it.
1. The <!-- md:plugin --> tokens/identifiers/shortcodes are processed by the shortcodes hook:
   https://github.com/squidfunk/mkdocs-material/blob/master/src/overrides/hooks/shortcodes.py
2. The hook replaces the shortcodes with a Markdown structure
3. The HTML is styled additionally with a custom CSS (mkdocs-material uses SCSS, which is later compiled and minified):
   

   mkdocs-material/src/overrides/assets/stylesheets/custom/_typeset.scss

   Line 97 in 175df61

   .mdx-badge {

To enable the hook, you need to add it to the mkdocs.yml file, as described here:
https://www.mkdocs.org/user-guide/configuration/#hooks

[axololly]

Ah, okay. Since it's currently not available to the public, in that case, I'll respect your decision to keep it for insiders and not try to reverse engineer the code.

Quick question: do insiders get more features or earlier access to features? Just read the page and found out they get earlier access.

If it's the second one, how long do they usually take to be released to the general public? I would love to add instant previews to part of my project.

[squidfunk]

It depends on the rate at which we get new sponsors, so it's hard to say. Instant previews are in the 22k goal, so it will definitely take some time, but who knows, maybe we'll reach it in a few months or a year? ☺️ Sponsors get all features immediately.

[axololly]

Ooh, yeah, that might take some serious time. Good on you and the others for raising that much money.

What do you suggest I do in the meantime for a "it's cheaper to make it at home" solution?

[squidfunk]

There are probably libraries out there that implement this functionality, but I'm not sure what goes well with Material for MkDocs. That's the reason why we implemented it natively, as it allows us to offer much better support.

[axololly]

Understandable. Would this be an allowed solution?