Mkdocs学习笔记¶

约 1210 个字 102 行代码 7 张图片预计阅读时间 5 分钟

MkDocs常用命令¶

mkdocs new [dir-name] - 创建新项目.
mkdocs serve - 网页实时预览.
mkdocs build - 部署网站（静态）.
mkdocs build --clean - 部署网站（静态），在发布新的版本之前，确保所有旧的文件都被清除并重新生成，进行站点更新后，确保不会有遗留的文件影响页面渲染.
mkdocs gh-deploy - 部署网站（GithubPage）.

MkDocs-Markdown语法¶

字体样式¶

Text can be ~~deleted~~ and replacement text added. This can also be combined into ~~one~~a single operation. Highlighting is also possible and comments can be added inline.

Formatting can also be applied to blocks by putting the opening and closing tags on separate lines and adding new lines between the tags and the content.

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

字体颜色¶

<font color="#f79646">text</font>

text

更多颜色代码，参考：RGB色值查询。

表格¶

Data table

| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

LeftCenterRight

Data table, columns aligned to left

| Method      | Description                          |
| :---------- | :----------------------------------- |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

Data table, columns centered

| Method      | Description                          |
| :---------: | :----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

Data table, columns aligned to right

| Method      | Description                          |
| ----------: | -----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

代码块¶

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

附带标题¶

bubble_sort.py

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

``` py title="bubble_sort.py"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

附带行号¶

为所有代码块显示行号

markdown_extensions:
  - pymdownx.highlight:
      linenums: true

为特定代码块显示行号

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

```python linenums="1"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

突出显示特定行¶

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

```python linenums="1" hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

分组代码块¶

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;
}

=== "C"

    ``` c
    #include <stdio.h>

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

=== "C++"

    ``` c++
    #include <iostream>

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

链接文件¶

Attribute Lists

分割线¶

<div class="divider">
  <span class="divider-line"></span>
  <img class="divider-image" src="/img/mfea.svg">
  <span class="divider-line"></span>
</div>

数学公式¶

行内公式：$a+b$

行间公式 $$ a + b = c $$

按钮¶

Resource Resource Resource Resource

图片¶

原始大小¶

更改大小¶

借助HTML语法

caption

字体颜色¶

这是一个红色的文本，使用 HTML 语法。

这是一个蓝色的文本，使用 HTML 语法。

列表¶

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- In scelerisque nibh non dolor mollis congue sed et metus
- Praesent sed risus massa
Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

tooltips¶

Hover me

The HTML specification is maintained by the W3C.

分列¶

\[a = b\]
import
放放风

Unordered listOrdered list

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

Sed sagittis eleifend rutrum
Donec vitae suscipit est
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

引用¶

这是一个引用块。这是第二行。

嵌套列表项

另一个列表项

盒子¶

内置环境¶

Warning

这是一个警告框。

Info

这是一个信息框。

Note

这是一个注意框。

Tip

这是一个提示框。

Danger

这是一个危险框。

Quote