Skip to content

Display Config Tips

Highlight notes, hints, and warnings in the text

Reference: admonition

mkdocs.yml
1
2
3
4
markdown_extensions:
  - admonition # (1)!
  - pymdownx.details # (2)!
  - pymdownx.superfences # (3)!
  1. highlight notes, hints, and warnings in the text
  2. detail block(!!! to ???)
  3. code fence

Tip

If you are using a markdown formatter (e.g. mdformat), you should use pre-commit-hooks to set up the mdformat-mkdocs plugin is recommended. The reason is that here.

Display code block

Reference: Code blocks

Tabbed display of code blocks

mkdocs.yml
1
2
3
4
markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

1
2
3
4
5
6
#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

1
2
3
4
5
6
#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

Add copy, code selection, and annotations to code blocks

mkdocs.yml
1
2
3
4
5
thema:
  features:
    - content.code.copy
    - content.code.select
    - content.code.annotate

Display code

Tip

  • To highlight using pygments, enable the following comment-outs.
  • linenums: true displays the number of lines of code.
  • The number of lines is displayed without python linenum="1".
mkdocs.yml
1
2
3
4
5
6
markdown_extensions:
  - pymdownx.highlight:
      #use_pygments: true
      #noclasses: true
      #pygments_style: monokai
      linenums: true

Display code in admonition

Highlight notes, hints, and warnings in the text参照

Display emoji

mkdocs.yml
1
2
3
4
markdown_extensions:
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

😄

Pop-up image display

glightbox plugin.

1
poetry add mkdocs-glightbox

1
pip install mkdocs-glightbox
mkdocs.yml
1
2
plugins:
  - glightbox

Comments