mkdocs-material

markdown 扩展效果

警告

• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

Bug

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod

可折叠警告

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

注释+警告

• https://squidfunk.github.io/mkdocs-material/reference/annotations/

示例:

Phasellus posuere in sem ut cursus (1)

Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

1. I’m an annotation!
2. I’m an annotation as well!

表情符号

• https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#with-colors-mkdocsyml

注意: 使用了自定义样式!!!

网格

• https://squidfunk.github.io/mkdocs-material/reference/grids/#using-generic-grids-unordered-list

• HTML for content and structure
• JavaScript for interactivity
• CSS for text running out of boxes
• Internet Explorer … huh?

• 示例2

Unordered listOrdered list

• Sed sagittis eleifend rutrum
• Donec vitae suscipit est
• Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci

Content tabs

=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

格式化

• https://squidfunk.github.io/mkdocs-material/reference/formatting/

示例:

• This was marked (highlight)
• This was inserted (underline)
• This was deleted (strikethrough)

键盘按键:

Ctrl+Alt+Del

选项卡

• https://squidfunk.github.io/mkdocs-material/reference/content-tabs/#usage

CC++

#include <stdio.h>

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

#include <iostream>

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

带有警告

Example

Unordered ListOrdered List

* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci

图表效果

• https://squidfunk.github.io/mkdocs-material/reference/diagrams/

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];