Playground

<div class='console'>

```console
$ 


```

</div>

404 NotFound¶

mkdocs-material允许用户自定义404页面。

你可以去看看本站的404页面，另外，如果你尝试去访问不存在的英文版面，会弹窗提示并且自动回退。

页面元信息¶

在markdown文件的开头可以进行meta信息的标注：

---
title: Playground of Markdown <!--(1)!-->
tags: <!--(2)!-->
  -  About
hide: <!--(3)!-->
  - navigation
  - toc

---

1. titile控制页面的一级标题
2. tags控制页面的标签，便于归纳整理
3. hide可以隐藏相应的内容，例如导航栏、目录、评论区等

include:
- math
- live <!--(1)!-->

命令行组件¶

termynal是一款简洁好看的命令行演示组件。

形如：

$ python3 -m pip install numpy
# 正在安装numpy，稍作等待

---> 100%

$ python3 -m pip list

Package    Version
---------- -------
numpy      1.25.2
pip        23.2.1
setuptools 58.0.4
six        1.15.0
wheel      0.37.0

注解¶

脚注¶

markdown支持一种比较通用的脚注方式：

我家门前有两棵树，一颗是枣树，另外一颗也是枣树[^1]。

[^1]: 这话是鲁迅说的。

这样一来会自动在文末生成一个脚注¹。

旁注¶

mkdocs-material还允许我们可以在文本中插入旁注(1)，插入的方式如下：

1. 你好👋，这里是一个旁注

mkdocs-material还允许我们可以在文本中插入旁注(1)，插入的方式如下：
{ .annotate }

1. 你好👋，这里是一个旁注

这样可以更便捷地查看注释的内容。

旁注的图标也可以自定义，默认是，我改成了。

代码块¶

代码块是markdown的基础组件：

print("Hello, world!")

额外选项¶

mkdocs-material中，代码块还可以自定义标题、显示行号、高亮显示某些行：

1
2
3
4
5
6

def fib(n: int):
    assert isinstance(n, int)
    if n<2:
        return 1
    else:
        return fib(n-1)+fib(n-2)

``` python linenums="1" title="fibonacci" hl_lines="2 3"
def fib(n: int):
    assert isinstance(n, int)
    if n<2:
        return 1
    else:
        return fib(n-1)+fib(n-2)
```

旁注¶

代码块中也可以加入旁注：

print() # (1)

1. 这时候会输出一个换行符\n

此外代码块的旁注还有一种特殊写法，可以把注释提示词隐藏（例如python中的#），只留下注释的内容。

官方叫：Stripping comments，脱衣注释哈哈哈哈哈哈

for i in range(10):
  # (1)
  print(i, end="") #(2)!

<!-- (1)-->

``` python
for i in range(10):
  # (1)
  print(i, end="") #(2)!
```

1. 这是一个for循环，依次打印出0-9
2. 使用end参数控制每次打印的休止符

并列内容¶

print("Hello, World!")

#include <stdio.h>
int main() {
  printf("Hello, World!");
  return 0;
}

上面这种两个代码并排显示也是一种扩展语法，写法如下：

=== "Block1"
    ```python
    print(1)
    ```
=== "Block2"
    ```C
    #include <stdio.h>
    int main() {
      printf("Hello, World!");
      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

还可以和自己嵌套：

突出显示¶

Admonitions或者叫call-out，是一种突出内容的手段。 原生的样式比较简单：

突出内容 引用内容

mkdocs-material支持更好看的样式：

??? info "标题"

    这里可以写一些内容

折叠与否¶

如果不需要折叠可以使用下面的写法：

!!! caution "标题"

    这里可以写一些内容

样式¶

此外我还自定义了一些样式：

图片¶

在原有markdown图片语法的基础之上，可以在末尾加上一些参数。

![circle](./assets/circle.png){align=right width=200 loading=lazy}
这是一个单位圆，图中$P$在第一象限，$PR\perp PQ$，$M,N$的横坐标都是2，问图示两个区域的面积何时相同？

居中¶

align参数可以调节居左、居右，但是无法实现居中效果，可以用下面的写法

渲染效果源代码

<figure markdown>
  ![circle](./assets/circle.png){width=400}
  <figcaption>Image caption</figcaption>
</figure>

放大显示¶

使用glightbox插件支持了图片的放大显示。添加{.nonzoom}类标签可以禁用glightbox组件。

边框¶

对于有figurecaption子节点的figure，会额外加一个边框，变成类似拍立得的效果：

数学公式¶

本站的LaTex支持则是依靠MathJax实现的，语法上需要小心并非所有的写法通用，具体有何差异可以去官网看一看⁴。

mkdocs material没有特殊的语法。行内公式$\cos \pi/2 = 0$和行间公式 $$ \sin^2\theta +\cos^2\theta =1 $$ 都是支持的。

视频¶

文件嵌入¶

视频的文件嵌入使用了mkdocs video插件，效果如下：

不得不说，我这波云霄飞车真的很帅

链接嵌入¶

使用HTML的iframe可以嵌入各大平台的视频，例如YouTube：

再如哔哩哔哩：

流程图¶

mermaid是简单强大的流程图绘制工具，具体细节参见它的的官网⁵，简单画个流程图：

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

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

pdf文件嵌入¶

使用html的application/pdf实现：

<center>
<object
    type="application/pdf"
    data="some.pdf#page=1&view=FitH&toolbar=1&navpanes=0"
    width=80%
    height=400>
</object>
</center>

其中传递了一些参数

• page=1，加载的时候打开第一页
• view=FitH，视图设置为Horizontal Fit
• toolbar=1，显示工具栏
• navpanes=0，默认不显示导航栏

还有很多其他可用的参数，具体可以参考Adobe的文档：Parameters for Opening PDF Files。

广告¶

本站部分页面开启了广告。

这里也放一个：