Jekyll Styling with Markdown, MathJax and LaTex

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

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

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

Markdown Basics

See Mastering Markdown on GitHub Guides for the basic usages.

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|

Image for local preview

![alt-text-of-sample-image](img.png)

Image when upload to site

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{multline} \shoveleft \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} \end{multline}\]
$$\begin{multline}
\shoveleft
\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}
\end{multline}$$

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}$

YAML

Should be at the front of every markdown file.

---
title: "Markdown on Jekyll"
tags: markdown jekyll mathjax latex
last_modified_at: 2020-02-22
---

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

/jekyll-styling-syntax

{{page.id}}

Updated:

Posted:

Comments