+
+ :octicons-light-bulb-16:
+ **Tip:** Enter some keywords to find icons and emojis and click on the
+ shortcode to copy it to your clipboard.
+
+
+
+
+
+
+
+- :fontawesome-brands-html5: __HTML__ for content and structure
+- :fontawesome-brands-js: __JavaScript__ for interactivity
+- :fontawesome-brands-css3: __CSS__ for text running out of boxes
+- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
+
+
+
+- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
+
+ ---
+
+ Install [`mkdocs-material`](#) with [`pip`](#) and get up
+ and running in minutes
+
+ [:octicons-arrow-right-24: Getting started](#)
+
+- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
+
+ ---
+
+ Focus on your content and generate a responsive and searchable static site
+
+ [:octicons-arrow-right-24: Reference](#)
+
+- :material-format-font:{ .lg .middle } __Made to measure__
+
+ ---
+
+ Change the colors, fonts, language, icons, logo and more with a few lines
+
+ [:octicons-arrow-right-24: Customization](#)
+
+- :material-scale-balance:{ .lg .middle } __Open Source, MIT__
+
+ ---
+
+ Material for MkDocs is licensed under MIT and available on [GitHub]
+
+ [:octicons-arrow-right-24: License](#)
+
+
+
+***
+
+=== "C"
+
+ ``` c
+ #include
+
+ int main(void) {
+ printf("Hello world!\n");
+ return 0;
+ }
+ ```
+
+=== "C++"
+
+ ``` c++
+ #include
+
+ int main(void) {
+ std::cout << "Hello world!" << std::endl;
+ return 0;
+ }
+ ```
+
+``` py hl_lines="2 3"
+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]
+```
+
+***
+!!! note
+
+ 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 "Phasellus posuere in sem ut cursus"
+
+ 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.
+
+??? Tip
+
+ 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.
+
+!!! info inline end
+
+ 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.
+
+
+
+
+***
+[Subscribe to our newsletter](#){ .md-button }
+
+[Send :fontawesome-solid-paper-plane:](mailto:<1135801806@qq.com>){ .md-button }
+
+| Method | Description |
+| ----------- | ------------------------------------ |
+| `GET` | :material-check: Fetch resource |
+| `PUT` | :material-check-all: Update resource |
+| `DELETE` | :material-close: Delete resource |
+
+***
+
+- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
+- [ ] Vestibulum convallis sit amet nisi a tincidunt
+ * [x] In hac habitasse platea dictumst
+ * [x] In scelerisque nibh non dolor mollis congue sed et metus
+ * [ ] Praesent sed risus massa
+- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
+
+
+$$
+\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}
+$$
+
+
+
+
+
+ { width="300" }
+ 图片说明
+
+
+**明暗**
+
+
+
+
+
+``` mermaid
+graph LR
+ A[Start] --> B{Error?};
+ B -->|Yes| C[Hmm...];
+ C --> D[Debug];
+ D --> B;
+ B ---->|No| E[Yay!];
+```
+
+``` mermaid
+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!
+```
+
+
+!!! pied-piper "Pied Piper"
+
+ 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.
+
+++ctrl+alt+del++
+
+
+
+
+
50%
+
+
+
+:octicons-arrow-right-24: [点我回到顶部](#)
+
+[Hover me][example]
+
+ [example]: https://example.com "I'm a tooltip!"
+
+
+[Hover me](https://example.com "I'm a tooltip!")
+
+The HTML specification is maintained by the W3C.
+
+*[HTML]: Hyper Text Markup Language
+*[W3C]: World Wide Web Consortium
+
+
+
+:fontawesome-brands-twitter:{ .twitter }
+
+
+
+``` py hl_lines="2 3"
+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]
+```
+``` py linenums="1"
+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]
+```
+``` title=".browserslistrc"
+--8<-- ".browserslistrc"
+Wcowin
+```
+
+
+
+
+
+ graph LR
+ A --- B
+ B-->C[fa:fa-ban forbidden]
+ B-->D(fa:fa-spinner);
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+