Demos For MKDocs

• 该页面使用MKDocs官方文档说明的一些特性，来测试整个博客生成和发布的流程。
• 后续有新的特性，可以采用该页面进行测试。

下面所有的例子都来自于官方reference的示例

Admonition

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.
!!! note "inner title"
        This is inner!

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.
!!! note "inner title"
        This is inner!

• 放在指定内容的右侧，需要先声明

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.

• a
• b
• c
• d
• e

Annotations

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

1. I'm an annotation! I can contain code, formatted text, images, ... basically anything that can be expressed in Markdown.

Nested annotation

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

1. I'm an annotation! (1)

   1. I'm an annotation as well!

Admonition with annotations

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

Content tabs with annotations

  需要注意，这里内容的前置是两个tab

Button

Subscribe to our newsletter

  直接通过html + js支持回调

点我有回调

Code Blocks

# Code block content

Code block with annotation

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

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

# 标签

Tables

Data table, columns aligned to right

Diagrams

 配合其他工具使用，直接插入图片，比如draw.io

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

Footnotes

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

Formatting

Text with sugggested changes

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.

Highlighting text

• This was marked (highlight)
• This was inserted (underline)
• This was deleted (strikethrough)
• H₂O
• A^TA
• Ctrl+Alt+Del

Grids

Card grid, complex example

Icons, Emojis

Images

• line0
• line1
• line2
• line3
• line4
• line0
• line1
• line2
• line3
• line4
• line3
• line4

Lists

Ordered List

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

Definition list

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.

Task list

• 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

Block syntax

Inline syntax

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)\).

Tooltips

• Hover me

• Hover me

• The HTML specification is maintained by the W3C.