跳转至

常用语法

markdown基本语法就不写了，官方教程中有基本语法和扩展语法

下列语法是Material for MkDocs支持，由python markdown及插件渲染的，格式对于其他编辑器可能没有效果

详细内容可参考Material for MkDocs和MkDocs+

内容选项卡

1
2
3
4
5
6
#include <stdio.h>
int main()
{
    printf("hello\n");
    return 0;
}

1
2
3
4
5
6
#include <iostream>
int main()
{
    std::cout << "hello" << std::endl;
    return 0;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
=== ":octicons-file-code-16: c"
    ```c linenums="1"
    #include <stdio.h>
    int main()
    {
        printf("hello\n");
        return 0;
    }
    ```

=== ":octicons-file-code-16: c++"
    ```c++ linenums="1"
    #include <iostream>
    int main()
    {
        std::cout << "hello" << std::endl;
        return 0;
    }
    ```

设置图片位置和宽度

权利的游戏

权利的游戏

1
2
3
![权利的游戏](https://www.ign.com.cn/sm/ign_cn/screenshot/default/1_7w3m.jpg "权利的游戏"){width="300"}

![权利的游戏](https://www.ign.com.cn/sm/ign_cn/screenshot/default/1_7w3m.jpg "设置宽度"){width="300" align=right}

按键

Ctrl+Alt+Del

Ctrl+Shift+F

1
2
3
++ctrl+alt+del++

++ctrl+shift+f++

公式

公式主要有行内公式和行间公式，行内公式形如\(密文=明文^EmodN\)，行间公式形如

\[ 明文=密文^EmodN. \]

详细内容可参考markdown中公式编辑教程

MkDocs中支持公式渲染需要做一写额外的配置，创建一个mathjax.js的文件，然后在mkdocs.yml中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
window.MathJax = {
  tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    processEscapes: true,
    processEnvironments: true
  },
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }
};


document$.subscribe(() => { 
  MathJax.typesetPromise()
})

1
2
3
4
5
6
7
8
markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

extra_javascript:
  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

图表

目前，支持图表需要在mkdocs.yml中添加以下内容：

- pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          # format: !!python/name:pymdownx.superfences.fence_code_format
          format: !!python/name:pymdownx.superfences.fence_div_format

extra_javascript:
    - https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

需要注意的是，如果存在navigation.instant，那么需要通过刷新页面才能进行图表的渲染

Question

这个地方，8.1.5版本的Material for MkDocs中的配置文件默认是fence_code_format，而且在它的issue中也表示需要将fence_div_format换成fence_code_format，但是在我这里确只有fence_div_format起作用，暂时不清楚是什么问题导致的；因为这是赞助版的功能，还没有开放给免费版 😓

流程图

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]
graph subgraph 标准接口 java接口-->jni接口-->抽象接口 end subgraph 底层对接不同的认证库 抽象接口-.->辅助库-->认证库 抽象接口-.->xxx辅助库-->xxx认证库 end

序列图

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

状态图

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

类图

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() }

实体关系图

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
本文总阅读量 次
回到页面顶部