Playground

404 NotFound¶

👉本站的404页面

页面元信息¶

在markdown文件的开头可以进行meta信息的标注： （下面这个加号是可以点击的）

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

---

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

include:
- math

命令行组件¶

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的基础组件：

print("Hello, world!")

悬浮注释¶

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

mkdocs material有一个注释的特殊写法，可以把注释的内容隐藏起来，变成可点击展开的小加号！

具体来说就是把注释内容替换成(num)，然后在代码块下方写对应的数字num.+注释内容：

for i in range(10):
  # (1)
  print(i)

<!-- (1)-->

``` python
for i in range(10):
  # (1)
  print(i)
```

1.  这是一个for循环，依次打印出0-9

不过现在这个样子还是有点丑的，虽然把注释内容隐藏了起来，但是注释符号还在，非常难受！不过mkdocs现在已经在测试进一步的功能（insider已经可以使用了），可以实现更加美观的样式

行号、标题、高亮¶

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

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("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 "标题"

    这里可以写一些内容

支持以下的样式：

• note
• abstract, summary, tldr
• info, todo
• tip, hint, important
• success, check, done
• question, help, faq
• warning, caution, attention
• failure, fail, missing
• danger, error
• bug
• example
• quote, cite

图片¶

在原有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插件支持了图片的放大显示。添加{.nozoom}类标签可以禁用glightbox组件。

数学公式¶

本站的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="../../Statistics/postgrad/assets/2024-02-22_Evading_Simplicity_Bias.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。