Styling Syntaxes

In this document, we'll showcase some commonly used features that MkDocs can achieve in a generated website. All of them can work out-of-the-box if you forked the MkDocs Material Template.

Markdown Basics

See Mastering Markdown on GitHub Guides for the basic usages.

The remainder of this post consists of pairs of generated content followed by its corresponding syntax.

---

Normal text

Normal text

---

Newline Failed

Newline
Success (Note the trailing spaces above)

Newline

Large Gap

Newline
Failed

Newline  
Success (Note the trailing spaces above)

Newline

Large Gap

---

Snippet from other sites

> Snippet from other sites

---

inline-code

`inline-code`

---

Bold

**Bold**

---

code

```
code
```

---

int a = 0; // c code

```c
int a = 0; // c code
```

---

console.log("test"); // js code

```js
int a = 0; // js code
```

---

1. one

   • a
     Contents should be indented correctly
   • b
     2 trailing spaces to ensure line-break

   • c

     Extra line for large gap

2. two

   • c Line-break failed
   • d
     Line-break success

   No Indent

1. one
   - a  
     Contents should be indented correctly
   - b  
     2 trailing spaces to ensure line-break
   - c

     Extra line for large gap

2. two
   - c
     Line-break failed
   - d  
     Line-break success

   No Indent

---

Table	Left	Center	Right
A	B	C	D
1	2	3	4

|Table|Left|Center|Right|
|-----|----|:----:|----:|
|A|B|C|D|
|1|2|3|4|

---

![alt-text-of-sample-image]({{imgroot}}{{page.url}}/img.png)

---

In-line link (look bad in plain text)

Named link

[In-line link (look bad in plain text)](https://google.com)

[Named link][google]

[google]: https://google.com

---

Header example

Header example2

### Header example

#### Header example2

MathJax & LaTex

Inline math \(f(x)=x^2\)

Inline math $f(x)=x^2$

---

Long math

\(\max\limits_\theta L_{\theta_0}(\theta)\), subject to \(D_{KL}^{\rho_{\theta_0}}(\theta_0,\theta)\le\delta\), where \(D_{KL}^\rho(\theta_1,\theta_2)=\mathbb{E}_{s\sim\rho}[D_{KL}(\pi_{\theta_1}(\cdot | s)\mid\mid\pi_{\theta_2}(\cdot | s))]\)

$\max\limits_\theta L_{\theta_0}(\theta)$, subject to $D_{KL}^{\rho_{\theta_0}}(\theta_0,\theta)\le\delta$, where $D_{KL}^\rho(\theta_1,\theta_2)=\mathbb{E}_{s\sim\rho}[D_{KL}(\pi_{\theta_1}(\cdot | s)\mid\mid\pi_{\theta_2}(\cdot | s))]$

---

Centered math:

\[f(x)=x^2\]

$$f(x)=x^2$$

---

Symbols	Using	Latex
\(✔\)	\(\color{green} ✔\)	\(\color{red} ✘\)

|Symbols|Using|Latex|
|:-:|:-:|:-:|
|$✔$|$\color{green} ✔$|$\color{red} ✘$|

---

\[\begin{aligned} G_t&=R_{t+1}+\gamma R_{t+2}+\gamma^2 R_{t+3}+\gamma^3 R_{t+4}+...\\ &=R_{t+1}+\gamma(R_{t+2}+\gamma R_{t+3}+\gamma^2 R_{t+4})+...\\ &=R_{t+1}+\gamma G_{t+1}\\ \end{aligned}\]

$$\begin{aligned}
G_t&=R_{t+1}+\gamma R_{t+2}+\gamma^2 R_{t+3}+\gamma^3 R_{t+4}+...\\
&=R_{t+1}+\gamma(R_{t+2}+\gamma R_{t+3}+\gamma^2 R_{t+4})+...\\
&=R_{t+1}+\gamma G_{t+1}\\
\end{aligned}$$

---

YAML

Tags should be listed in the beginning of the file with YAML syntax.

---
tags: [demo]
---

---

Liquid

Page(title='Styling Syntaxes', url='/mkdocs-material-template/styling-syntaxes/')

{{page}}

---

Material for MkDocs

Admonitions

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

    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.

---

Abstract

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.

!!! abstract

    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

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

    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.

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

---

Success

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.

!!! success

    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.

---

Question

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.

!!! question

    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.

---

Warning

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.

!!! warning

    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.

---

Failure

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.

!!! failure

    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.

---

Danger

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.

!!! danger

    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.

---

Bug

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.

!!! bug

    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.

---

Example

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.

!!! example

    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.

---

Quote

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.

!!! quote

    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.

---

See this link for more info.

Icons & Emojis

:smile:

See this link for more info.

Final Notes

There may exist notation conflicts between Markdown and MathJax. In rare cases, you may need to use the escaped text (e.g., \vert, \_) instead of the original symbol (e.g., |, _).