Styling Syntax Test
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
```
- one
-
a
Contents should be indented correctly
-
b
Extra line to ensure line-break
-
- 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|
In-line link (look bad in plain text)
[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 \_)