跳转至

Material Theme Tutorial

Based on Docs of mkdocs-material and cyent.

警告块

基本用法

警告块遵循一个简单的语法:每个块都以!!!开始，然后使用一个关键字作为块的类型限定符。然后，块的内容跟随到下一行，由四个空格缩进。

Note

Text

Text

改变标题

title

Text

Text

删除标题

Text

Text

折叠块

title

Text

Text

折叠块（默认打开）

title

Text

Text

内联块

Info

话语教给我们很多，但善恶还是可以自明。 —— 王小波，《思维的乐趣》

我要说出我的结论。中国人一直生活在一种有害哲学的影响之下，孔孟程朱编出了这套东西完全是因为他们在社会的上层生活。假如从整个人类来考虑问题，早就会发现，趋利避害，直截了当地解决实际问题最重要――说实话中国人在这方面已经不像样了这不是什么哲学的思辨，而是我的生活经验。我们的社会里，必须有改变物质生活的原动力，这样才能把未来的命脉握在自己的手里。—— 王小波，《沉默的大多数》

Info

话语教给我们很多，但善恶还是可以自明。 —— 王小波，《思维的乐趣》

我要说出我的结论。中国人一直生活在一种有害哲学的影响之下，孔孟程朱编出了这套东西完全是因为他们在社会的上层生活。假如从整个人类来考虑问题，早就会发现，趋利避害，直截了当地解决实际问题最重要――说实话中国人在这方面已经不像样了这不是什么哲学的思辨，而是我的生活经验。我们的社会里，必须有改变物质生活的原动力，这样才能把未来的命脉握在自己的手里。—— 王小波，《沉默的大多数》

支持类型

note

Text

Text

abstract

Text

Text

info

Text

Text

tip

Text

Text

success

Text

Text

question

Text

Text

warning

Text

Text

fail

Text

Text

danger

Text

Text

bug

Text

Text

example

Text

Text

quote

Text

Text

CodeHilite

基本用法

import tensorflow as tf

The import tensorflow as tf function is used to...

代码标注（带链接）

theme:
  features:
    - content.code.annotate # (1)
  1. 🙋‍♂️ I'm a code annotation! I can contain code, formatted text, images, ... basically anything that can be written in Markdown.
# (1)!
  1. Look ma, less line noise!

行编号

1
2
3
4
5
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]

多组代码块

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

多组内容块

  • 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

多组块与警告块的嵌套

Example

  • 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

Example

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

Example

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

内容语法

Text can be deleted and replacement text added. This can also be combined into onea 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.
\[ \frac{n!}{k!(n-k)!} = \binom{n}{k} \]

Lorem ipsum dolor sit amet: \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\)

  • This was marked
  • This was inserted
  • This was deleted
  • H2O
  • ATA
  • AA
  • BB
  • Ctrl+Alt+Del
  • 箭头 (←, →, ↔)
  • 商标和版权符号 (©, ™, ®)
  • 分数 (½, ¼, ...).

表情

    Tip: Enter some keywords to find icons and emojis and click on the shortcode to copy it to your clipboard.

    💩 😄 ❤ 👍 🤗

    The following icon sets are bundled with Material for MkDocs:

    图片

    Image, aligned to left
    ![Image title](https://dummyimage.com/600x400/eee/aaa){ align=left }

    Image title

    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.

    Image, aligned to right
    ![Image title](https://dummyimage.com/600x400/eee/aaa){ align=right }

    Image title

    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.

    Image title
    Image caption

    列表

    • Nulla et rhoncus turpis.
      • Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
      • Nullam dignissim ultrices urna non auctor.

    1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis nulla. Vivamus a pharetra leo.

      1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a ultricies libero efficitur sed.

      2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.

        1. Mauris dictum mi lacus
        2. Ut sit amet placerat ante
        3. Suspendisse ac eros arcu
    Lorem ipsum dolor sit amet

    Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.

    Cras arcu libero

    Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.

    Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna non auctor.

    • Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
    • Vestibulum convallis sit amet nisi a tincidunt

    表格

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

    绘图

    graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
    sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
    stateDiagram-v2
state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]
    erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

    脚注

    单行 1 多行2

    1. 单行脚注 ↩

    2. 多行脚注

      多行脚注

      多行脚注 ↩