Mkdocs Playground¶

探索 Mkdocs 的拓展能力。

Annotations¶

Case 1、Tab¶

Tab 1Tab 2Unordered listOrdered list

Lorem ipsum dolor sit amet,

consectetur adipiscing elit.

Phasellus posuere in sem ut cursus

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

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

Case 2、Highlight¶

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.

Lorem ipsum

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.

Lorem ipsum

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.

Lorem ipsum

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.

Tables¶

Case 3、Tables¶

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

Diagrams¶

Case 4、流程图¶

Case 5、时序图¶

Case 6、状态转移图¶

Case 7、类图¶

Case 8、ER 图¶

Formatting¶

Case 9、高亮 Changes¶

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.

Case 10、高亮 Text¶

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

Images¶

Case 11、图片位置¶

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.

Case 12、图片懒加载¶

Lists¶

Case 13、任务列表¶

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

Math¶

Case 14、数学公式¶

\cos x = \sum_{k = 0}^{\infty} \frac{(- 1)^{k}}{(2 k)!} x^{2 k}

Tooltips¶

Case 15、Hover 提示¶

The HTML specification is maintained by the W3C.