2 minute read

In this document, we’ll showcase some commonly used features that Jekyll can achieve in a generated website. All of them can work out-of-the-box if you forked our Minimal Mistakes Template.

The feature includes: markdown, mathjax, latex, yaml, css, html, liquid.

Markdown Basics

See Mastering Markdown on GitHub Guides for the basic usages.

The following demonstrations are all previews followed by its markdown syntax:


Normal text

Normal text

Newline Failed

Newline

Success

Newline
Failed

Newline

Success

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

      Extra line to ensure line-break

  2. two
    • c Line-break failed
    • d

    No Indent

1. one
   - a

     Contents should be indented correctly

   - b

     Extra line to ensure line-break
2. two
   - c
     Line-break failed
   - d

   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

![alt-text-of-sample-image]({{site.imgs}}{{page.id}}/img.png)

In-line link (look bad in plain text)

This is better

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

[This is better][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\vert s)\mid\mid\pi_{\theta_2}(\cdot\vert 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\vert s)\mid\mid\pi_{\theta_2}(\cdot\vert 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}$$

Broken equation $61{10}$, $111101_2$, $3D{16}$

Fixed equation $61_{10}$, $111101_2$, $3D_{16}$

Broken equation $61_{10}$, $111101_2$, $3D_{16}$

Fixed equation $61\_{10}$, $111101\_2$, $3D\_{16}$

Note: The fixed equation only works when the single dollar sign is enabled.


YAML

Should be at the front of every markdown file.

---
title: "Styling Syntax Test"
tags: jekyll mathjax latex
last_modified_at: 2021-12-19T06:53:11
---

Text before this will be shown in search results.

<!--more-->

Minimal Mistake Styles

🧻 Preliminary Draft

The author hasn’t finished editing this post, and the content hasn’t been proof-read. While this post may contain useful information, the overall quality may be pretty low.

<div class="notice--danger" markdown="1">

🧻 **Preliminary Draft**

The author hasn't finished editing this post, and the content hasn't been proof-read. While this post may contain useful information, the overall quality may be pretty low.

</div>

📄 Source

📜 Paper

<div class="notice--primary" markdown="1">

📄 **Source**

📜 Paper

</div>

✏️ Author’s Note

Content

Bold

<div class="notice" markdown="1">

✏️ **Author's Note**

Content

**Bold**

</div>

♾️ Math Definition

<div class="notice--warning" markdown="1">

♾️ **Math Definition**

</div>

⚠️ Common Mistakes

<div class="notice--danger" markdown="1">

⚠️ **Common Mistakes**

</div>

✔️ Keynote

<div class="notice--success" markdown="1">

✔️ **Keynote**

</div>

🏷️ Label

<div class="notice--info" markdown="1">

🏷️ **Label**

</div>

📔 Prerequisites

📝 Post

<div class="notice--info" markdown="1">

📔 **Prerequisites**

📝 Post

</div>

HTML

Click to Expand

Yeah! Markdown

<details><summary>Click to Expand</summary><div markdown="1">
**Yeah!** Markdown
</div></details>

Liquid

/styling-syntax-test

{{page.id}}

Final Notes

Due to the compatibility issue between Kramdown and Mathjax, You should not use the condition symbol (|) directly (kramdown table synyax), use the escaped text (\vert) instead. Furthermore, you will want to use double dollar sign ($$...$$) for most of your math notations, since single dollar sign ($...$) may have some conflict with kramdown. (e.g., underscore need to be escaped with \_)

Updated:

Posted: