贡献指南之高级语法 | Advanced Syntax⚓︎

本文的所有写法的样式都适配 Markdown 的基本语法，请务必阅读相关语法文档。

粗体斜体测试⚓︎

Text Only

**粗体** _斜体_

粗体斜体

智能符号⚓︎

Text Only

(tm)

(c)

(r)

c/o

+/-

-->

<--

<-->

=/=

1/4, etc.

1st 2nd etc.

™

©

®

℅

±

→

←

↔

≠

¼, etc.

1^st 2^nd etc.

选项卡⚓︎

https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#tabbed

常见的⚓︎

Text Only

=== "列表1"

    Markdown **内容**.

    测试段落.

=== "列表 2"

    More Markdown **内容**.

    - 列表 a
    - 列表 b

列表 1列表 2

Markdown 内容.

测试段落.

More Markdown 内容.

列表 a
列表 b

阻断连续⚓︎

在极少数情况下，您希望紧接着两个单独的选项卡集，您可以使用!显式标记新选项卡集的开始

Text Only

===! "列表 A"

    测试文本.

=== "列表 B"

    `更多内容.`

===! "列表 C"

    测试文本.

=== "列表 D"

    `更多内容.`

列表 A列表 B

测试文本.

更多内容.

列表 C列表 D

测试文本.

更多内容.

指定默认选择⚓︎

Text Only

=== "Not Me"

    Markdown **内容**.

        测试段落.

===+ "Select Me"

    More Markdown **内容**.

        - 列表 a
        - 列表 b

=== "Not Me Either"

    另一个 列表

Not MeSelect MeNot Me Either

Markdown 内容.

测试段落.

More Markdown 内容.

列表 a
列表 b

另一个列表

警告框⚓︎

https://squidfunk.github.io/mkdocs-material/reference/admonitions

定制化：https://squidfunk.github.io/mkdocs-material/reference/admonitions/#custom-admonitions

Text Only

!!! note "笔记"

    默认样式

笔记

默认样式

Text Only

!!! abstract ""

    无标题样式

无标题样式

Text Only

??? info "信息"

    折叠样式

信息

折叠样式

Text Only

???+ tip "提示"

    折叠默认打开样式

提示

折叠默认打开样式

Text Only

=== "右对齐"

    注意左右对齐，附属的文字一定要在对齐样式下方，才能实现左右对齐，否则会显示在框的上方

    !!! success inline end "成功"

        右对齐样式

    这是一个右对齐样式

=== "左对齐"

    注意左右对齐，附属的文字一定要在对齐样式下方，才能实现左右对齐，否则会显示在框的上方

    !!! question inline "问题"

        左对齐样式

    这是一个左对齐样式

右对齐左对齐

注意左右对齐，附属的文字一定要在对齐样式下方，才能实现左右对齐，否则会显示在框的上方

成功

右对齐样式

这是一个右对齐样式

注意左右对齐，附属的文字一定要在对齐样式下方，才能实现左右对齐，否则会显示在框的上方

问题

左对齐样式

这是一个左对齐样式

Text Only

!!! pied-piper "定制样式 Pied Piper"

    定制样式测试

定制样式 Pied Piper

定制样式测试

注释⚓︎

默认注释⚓︎

Text Only

这是一个注释 (1) 。
{.annotate}

1. 我是一个注释 :man_raising_hand:

这是一个注释 (1) 。

我是一个注释

嵌套注释⚓︎

Text Only

嵌套注释 (1)
{ .annotate }

1.  我是一个嵌套注释 (1) :man_raising_hand:
    { .annotate }

    1.  我是嵌套注释的子注释 :man_raising_hand:

嵌套注释 (1)

我是一个嵌套注释 (1)
1. 我是嵌套注释的子注释

提示框注释⚓︎

Text Only

!!! note annotate "注释(1)"

    我是一个注释(2)

1. 我是一个注释 :man_raising_hand:
2. 我是一个注释 :man_raising_hand:

注释(1)

我是一个注释(2)

我是一个注释
我是一个注释

选项卡注释⚓︎

Text Only

=== "列表 1"

    选项卡注释1(1)
    {.annotate}

    1. 选项卡注释1 :man_raising_hand:

=== "列表 2"

    选项卡注释2(1)
    {.annotate}

    1. 选项卡注释2 :man_raising_hand:

列表 1列表 2

选项卡注释1(1)

选项卡注释1

选项卡注释2(1)

选项卡注释2

HTML 包装任意元素⚓︎

Text Only

可以用 div 把任何元素包裹起来，这样就可以添加任意的样式的注释（特例除外）

<div class="annotate" markdown>

> 后面有一个注释(1)

</div>

---

1. 我是一个注释 :man_raising_hand:

可以用 div 把任何元素包裹起来，这样就可以添加任意的样式的注释（特例除外）

后面有一个注释(1)

我是一个注释

按钮⚓︎

默认按钮⚓︎

Text Only

[回到顶部](#){: .md-button }

回到顶部

填充色按钮⚓︎

Text Only

[回到顶部(填充色)](#){ .md-button .md-button--primary }

回到顶部(填充色)

带图标按钮⚓︎

Text Only

[发送:fontawesome-solid-paper-plane:](<javascript:alert$.next("测试成功")>){ .md-button }

发送

代码块⚓︎

默认代码块⚓︎

Text Only

    ```python
    print("hello world!")
    ```

Python

print("hello world!")

添加标题代码块⚓︎

Text Only

    ```Python title="自定义标题"
    print("hello world!")
    ```

自定义标题

print("hello world!")

添加注释代码块⚓︎

Text Only

    ```yaml
    theme:
    features:
        - content.code.annotate #这是一个注释(1)
    ```

    1. 注释:man_raising_hand:

YAML

theme:
features:
  - content.code.annotate #这是一个注释(1)

注释

添加注释代码块（剥离注释）⚓︎

Text Only

    ```py
    print("hello world!") #这是一个注释(1)!
    ```

    1. 剥离的注释:man_raising_hand:

Python

print("hello world!") #这是一个注释(1)!

剥离的注释

添加行号⚓︎

Text Only

    ```py linenums="99999"
    print("hello world!")
    ```

Python

print("hello world!")

突出显示特定行⚓︎

代码块行号⚓︎

Text Only

    ```py 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]
    ```

Python

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]

代码块行号(行号范围)⚓︎

Text Only

    ```py hl_lines="3-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]
    ```

Python

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]

突出显示内联代码块⚓︎

Text Only

The `#!python range()` function is used to generate a sequence of numbers.

The range() function is used to generate a sequence of numbers.

嵌入外部文件⚓︎

这里写源代码的时候需要把第二行两边的顿号去掉

Text Only

```title="嵌入测试"
`--8<-- "docs/嵌入测试.md"`
```

嵌入测试

分组⚓︎

分组代码块⚓︎

Text Only

=== "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;
    }
    ```

CC++

C

#include <stdio.h>

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

C++

#include <iostream>

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

其他内容分组⚓︎

Text Only

=== "无序列表"

    * 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

无序列表有序列表

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

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

嵌入内容⚓︎

Text Only

!!! 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

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

数据表⚓︎

默认数据表⚓︎

Text Only

| 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

列对齐数据表⚓︎

Text Only

=== "Left"

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

=== "Center"

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

=== "Right"

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

LeftCenterRight

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

mermaid 图⚓︎

流程图⚓︎

Text Only

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

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

时序图⚓︎

Text Only

```mermaid
sequenceDiagram
autonumber
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!
```

sequenceDiagram
autonumber
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!

状态图⚓︎

Text Only

```mermaid
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 --> [*]
```

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 --> [*]

类图⚓︎

Text Only

```mermaid
classDiagram
Person <|-- Student
Person <|-- Professor
Person : +String name
Person : +String phoneNumber
Person : +String emailAddress
Person: +purchaseParkingPass()
Address "1" <-- "0..1" Person:lives at
class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
}
class Professor{
    +int salary
}
class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()
}
```

classDiagram
Person <|-- Student
Person <|-- Professor
Person : +String name
Person : +String phoneNumber
Person : +String emailAddress
Person: +purchaseParkingPass()
Address "1" <-- "0..1" Person:lives at
class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
}
class Professor{
    +int salary
}
class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()
}

实体关系图⚓︎

Text Only

```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
LINE-ITEM {
    string name
    int pricePerUnit
}
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
LINE-ITEM {
    string name
    int pricePerUnit
}
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

其他图⚓︎

除了上面列出的 mermaid 图类型之外，Mermaid.js 还提供对饼图、甘特图、用户旅程、git 图和需求图的支持，所有这些都未得到 Material for MkDocs 的正式支持。这些 mermaid 图应该仍然像 Mermaid.js 所宣传的那样工作，但我们不认为它们是一个好的选择，主要是因为它们在移动设备上工作得不好。

脚注⚓︎

默认脚注⚓︎

脚注正文文字⚓︎

Text Only

Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]

Lorem ipsum¹ dolor sit amet, consectetur adipiscing elit.²

添加脚注⚓︎

Text Only

[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[^2]:
    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.

格式化⚓︎

标记测试⚓︎

Text Only

==标记我==

^^下划线^^

上标^上^

- H~2~O
- A^T^A

标记我

下划线

上标^上

H₂O
A^TA

增删建议⚓︎

Text Only

文本可以是 已删除 和替换文本 增加。 这也可以
组合成 一个 另一个 操作。 突出显示也是
可能的 并且可以内联添加注释 。

文本可以是 ~~已删除~~ 和替换文本增加。这也可以组合成一个另一个操作。突出显示也是可能的并且可以内联添加注释。

Text Only



格式化也可以通过将开始和结束应用于块
将标签放在单独的行上，并在标签和内容之间添加新行。



- ==This was marked==
- ^^This was inserted^^
- ~~This was deleted~~

格式化也可以通过将开始和结束应用于块将标签放在单独的行上，并在标签和内容之间添加新行。

This was marked
This was inserted
~~This was deleted~~

键盘按键⚓︎

Text Only

++ctrl+alt+del++

Ctrl+Alt+Del

网格⚓︎

列表语法⚓︎

Text Only

<div class="grid cards" markdown>

- :fontawesome-brands-html5: **HTML** 内容和结构
- :fontawesome-brands-js: **JavaScript** 用于交互
- :fontawesome-brands-css3: **CSS** 文本样式
- :fontawesome-brands-internet-explorer: **Internet Explorer** ... 嗯？

</div>

HTML 内容和结构
JavaScript 用于交互
CSS 文本样式
Internet Explorer ... 嗯？

更复杂的列表⚓︎

注：此处格式化会把语法改错，---改成***，缩进后退了一步，需要调整

不建议使用该写法，除非迫不得已

2024 年 4 月 5 日更新，可以通过网格块语法嵌套来抵消格式化带来的麻烦，good! 感谢Hello-CTF给我带来的灵感

Text Only

<div class="grid cards" markdown>

<div class="grid cards" markdown>
-   :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__

    ---

    Install [`mkdocs-material`](#) with [`pip`](#) and get up
    and running in minutes

    [:octicons-arrow-right-24: Getting started](#)

</div>

<div class="grid cards" markdown>
-   :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__

    ---

    Focus on your content and generate a responsive and searchable static site

    [:octicons-arrow-right-24: Reference](#)

</div>

<div class="grid cards" markdown>
-   :material-format-font:{ .lg .middle } __Made to measure__

    ---

    Change the colors, fonts, language, icons, logo and more with a few lines

    [:octicons-arrow-right-24: Customization](#)

</div>

<div class="grid cards" markdown>
-   :material-scale-balance:{ .lg .middle } __Open Source, MIT__

    ---

    Material for MkDocs is licensed under MIT and available on [GitHub]

    [:octicons-arrow-right-24: License](#)

</div>

</div>

Set up in 5 minutes

Install mkdocs-material with pip and get up and running in minutes

Getting started

It's just Markdown

Focus on your content and generate a responsive and searchable static site

Reference

Made to measure

Change the colors, fonts, language, icons, logo and more with a few lines

Customization

Open Source, MIT

Material for MkDocs is licensed under MIT and available on [GitHub]

License

块语法⚓︎

将卡片网格延伸到网格的其他元素混合。

Text Only

<div class="grid" markdown>

:fontawesome-brands-html5: **HTML** for content and structure
{ .card }

:fontawesome-brands-js: **JavaScript** for interactivity
{ .card }

:fontawesome-brands-css3: **CSS** for text running out of boxes
{ .card }

> :fontawesome-brands-internet-explorer: **Internet Explorer** ... huh?

</div>

HTML for content and structure

JavaScript for interactivity

CSS for text running out of boxes

Internet Explorer ... huh?

通用网格⚓︎

这个意思是多种形式的语法都可以嵌套在网格语法内

Text Only

    <div class="grid" markdown>

    === "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

    ```title="Content 列表s"
    === "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
    ```

    </div>

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 列表s

=== "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

图标、表情符号⚓︎

表情符号⚓︎

Text Only

emoji 表情 :smile:

图标 :fontawesome-regular-face-laugh-wink:

带颜色的图标 :fontawesome-brands-youtube:{ .youtube }

带动画的图标 :octicons-heart-fill-24:{ .heart }

emoji 表情

图标

带颜色的图标

带动画的图标

灯箱⚓︎

图像对齐⚓︎

Text Only

=== "左对齐"

    ![Image title](https://dummyimage.com/300x200/eee/aaa){ align=left }

    “Lorem ipsum dolor sit amet，consectetur adipiscing elit。没有什么是不变的。在紧急情况下，很难找到适合的解决方案，仅此而已。”

=== "右对齐"

    ![Image title](https://dummyimage.com/300x200/eee/aaa){ align=right }

    “Lorem ipsum dolor sit amet，consectetur adipiscing elit。没有什么是不变的。在紧急情况下，很难找到适合的解决方案，仅此而已。”

左对齐右对齐

“Lorem ipsum dolor sit amet，consectetur adipiscing elit。没有什么是不变的。在紧急情况下，很难找到适合的解决方案，仅此而已。”

图片说明⚓︎

遗憾的是，Markdown 语法不提供对图像标题的本机支持，但始终可以在 HTML 扩展中使用带有文字 figure 和 figcaption 标签的 Markdown：

Text Only

<figure markdown="span">
  ![Image title](https://dummyimage.com/600x400/){ width="300" }
  <figcaption>Image caption</figcaption>
</figure>

图像延迟加载⚓︎

Text Only

![Image title](https://dummyimage.com/600x400/){ loading=lazy }

深色浅色图片切换⚓︎

暂不需要

Text Only

https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode

列表⚓︎

无序列表⚓︎

Text Only

- Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur
  accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh
  lacinia sed. Aenean in finibus diam.

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

Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh lacinia sed. Aenean in finibus diam.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.

有序列表⚓︎

有序列表必须以数字开头，后跟一个点。数字不需要是连续的，可以全部设置为 1.，因为它们在渲染时会重新编号

Text Only

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

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

定义列表⚓︎

一般用不着，且受格式化影响较大。

Text Only

`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.

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.

任务列表⚓︎

Text Only

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

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

x+ {: .task-failed }表示失败

Mathjax & KaTex 测试⚓︎

Text Only

$$
\operatorname{ker} f =\{g\in G: f(g)= e_{H}\}{\mbox{.}}
$$

The homomorphism $f$ is injective if and only if its kernel is only the
singleton set $e_G$, because otherwise $\exists a,b\in G$ with $a\neq b$ such
that $f(a)=f(b)$.

\[ \operatorname{ker} f =\{g\in G: f(g)= e_{H}\}{\mbox{.}} \]

The homomorphism \(f\) is injective if and only if its kernel is only the singleton set \(e_G\), because otherwise \(\exists a,b\in G\) with \(a\neq b\) such that \(f(a)=f(b)\).

工具提示⚓︎

Text Only

[Hover me](https://example.com "I'm a tooltip!")

Hover me

工具提示（链接引用）⚓︎

Text Only

[Hover me][example]

[example]: https://example.com "I'm a tooltip!"

Hover me

工具提示（带有提示的图标）⚓︎

Text Only

:material-information-outline:{ title="Important information" }

缩写⚓︎

Text Only

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

The HTML specification is maintained by the W3C.

_[HTML]: Hyper Text Markup Language _[W3C]: World Wide Web Consortium

术语表⚓︎

术语表的设置路径在 include/abbreviations.md 里面

Text Only

The HTML specification is maintained by the W3C.

The HTML specification is maintained by the W3C.

yaml 元数据引用测试⚓︎

Text Only

<p align="center" markdown>

<a href="https://w1ndys.top" name="作者主页" > :material-home:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://blog.w1ndys.top/html/QQ.html" name="作者QQ" > :fontawesome-brands-qq:{ .lg .light } </a>&nbsp; &nbsp;

<a href="mailto:w1ndys@outlook.com" name="作者邮箱" > :material-email:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://github.com/W1ndys" name="作者Github主页" > :fontawesome-brands-github:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://blog.w1ndys.top/" name="作者博客" > :fontawesome-solid-blog:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://squidfunk.github.io-mkdocs-material-" name="Material for MkDocs提供搭建文档服务" > :simple-materialformkdocs:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://vercel.com/W1ndys" name="Vercel提供部署服务" > :simple-vercel:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://www.netlify.com/" name="Netlify提供部署服务" > :simple-netlify:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://render.com/" name="Render提供部署服务" > :W1ndys-Render:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://www.cloudflare.com/" name="Cloudflare提供部署服务" > :simple-cloudflare:{ .lg .light } </a>&nbsp; &nbsp;

<a href="https://v6.51.la/report/overview?comId=416432" name="51la提供统计服务" > :W1ndys-51la:{ .lg .light } </a>&nbsp; &nbsp;

<br/>
当你看到一大堆图标的时候，就证明测试成功了。
</p>

当你看到一大堆图标的时候，就证明测试成功了。

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. ↩

发现错误? 想参与编辑? 请阅读: 贡献指南，想联系作者？请点击: 联系作者，想赞助我? 请点击: 赞助计划

贡献指南之高级语法 | Advanced Syntax⚓︎

粗体斜体测试⚓︎

智能符号⚓︎

选项卡⚓︎

常见的⚓︎

阻断连续⚓︎

指定默认选择⚓︎

警告框⚓︎

注释⚓︎

默认注释⚓︎

嵌套注释⚓︎

提示框注释⚓︎

选项卡注释⚓︎

HTML 包装任意元素⚓︎

按钮⚓︎

默认按钮⚓︎

填充色按钮⚓︎

带图标按钮⚓︎

代码块⚓︎

默认代码块⚓︎

添加标题代码块⚓︎

添加注释代码块⚓︎

添加注释代码块（剥离注释）⚓︎

添加行号⚓︎

突出显示特定行⚓︎

代码块行号⚓︎

代码块行号(行号范围)⚓︎

突出显示内联代码块⚓︎

嵌入外部文件⚓︎

分组⚓︎

分组代码块⚓︎

其他内容分组⚓︎

嵌入内容⚓︎

数据表⚓︎

默认数据表⚓︎

列对齐数据表⚓︎

mermaid 图⚓︎

流程图⚓︎

时序图⚓︎

状态图⚓︎

类图⚓︎

实体关系图⚓︎

其他图⚓︎

脚注⚓︎

默认脚注⚓︎

脚注正文文字⚓︎

添加脚注⚓︎

格式化⚓︎

标记测试⚓︎

增删建议⚓︎

键盘按键⚓︎

网格⚓︎

列表语法⚓︎

更复杂的列表⚓︎

块语法⚓︎

通用网格⚓︎

图标、表情符号⚓︎

表情符号⚓︎

灯箱⚓︎

图像对齐⚓︎

图片说明⚓︎

图像延迟加载⚓︎

深色浅色图片切换⚓︎

列表⚓︎

无序列表⚓︎

有序列表⚓︎

定义列表⚓︎

任务列表⚓︎

Mathjax & KaTex 测试⚓︎

工具提示⚓︎

工具提示⚓︎

工具提示（链接引用）⚓︎

工具提示（带有提示的图标）⚓︎

缩写⚓︎

术语表⚓︎

yaml 元数据引用测试⚓︎

评论