Jekyll is a static site generator that transforms plain text into static websites and blogs. When used together with Markdown, Jekyll allows users to write content in a simple, readable format that can be easily converted into HTML. Markdown’s straightforward syntax makes it easy to format text, create lists, add links, and include code snippets, while Jekyll handles the layout and structure of the site. This combination provides a powerful yet user-friendly way to create and manage static websites.
italic or italic bold or bold bold and italic or bold and italic This is bold text using HTML syntax.
This is strikethrough text.
1
2
3
4
5
6
*italic* or _italic_ <br>**bold** or __bold__ <br>***bold and italic*** or ___bold and italic___ <br>
This is <strong>bold</strong> text using HTML syntax. <br>
~~This is strikethrough text.~~
***Term 1***
: _Definition of term 1_
**Term 2**
: ~~Wrong definition of term 2~~
Tables
Header 1
Header 2
Row 1 Col 1
Row 1 Col 2
Row 2 Col 1
Row 2 Col 2
1
2
3
4
| Header 1 | Header 2 |
| -------- | -------- |
| Row 1 Col 1 | Row 1 Col 2 |
| Row 2 Col 1 | Row 2 Col 2 |
Left Aligned
Center Aligned
Right Aligned
Row 1 Col 1
Row 1 Col 2
Row 1 Col 3
Row 2 Col 1
Row 2 Col 2
Row 2 Col 3
1
2
3
4
| Left Aligned | Center Aligned | Right Aligned |
|:------------ |:--------------:| -------------:|
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
Block Quote
This line shows the block quote.
This line shows the nested block quote.
This line shows the nested block quote.
This line shows the nested block quote.
This line shows the nested block quote. This line shows the nested block quote.
1
2
3
4
5
6
7
8
> This line shows the _block quote_.
>> This line shows the _nested block quote_. >>> This line shows the _nested block quote_.
>> This line shows the _nested block quote_. >>>> This line shows the _nested block quote_. >>> This line shows the _nested block quote_.
Prompts
An example showing the tip type prompt.
An example showing the info type prompt.
An example showing the warning type prompt.
An example showing the danger type prompt.
1
2
3
4
5
6
7
8
9
10
11
> An example showing the `tip` type prompt.
{: .prompt-tip }
> An example showing the `info` type prompt.
{: .prompt-info }
> An example showing the `warning` type prompt.
{: .prompt-warning }
> An example showing the `danger` type prompt.
{: .prompt-danger }
Inline Code
This is an example of Inline Code.
1
This is an example of `Inline Code`.
Filepath
Here is the /path/to/the/file.extend.
1
Here is the `/path/to/the/file.extend`{: .filepath}.
Code blocks
1
2
This is a common code snippet,
without syntax highlight and line number.
1
2
3
4
```text
This is a common code snippet,
without syntax highlight and line number.
```
Line Number
By default, all languages except plaintext, console, and terminal will display line numbers. Add the class nolineno to hide the line numbers:
1
2
This is a common code snippet,
without syntax highlight and line number.
1
2
3
4
5
```text
This is a common code snippet,
without syntax highlight and line number.
```
{: .nolineno }
Specific Language
Using ```{language} you will get a code block with syntax highlight:
1
2
3
4
5
x=10ifx>5:print("x is greater than 5")else:print("x is not greater than 5")
1
2
3
4
5
6
7
```python
x=10ifx>5:print("x is greater than 5")else:print("x is not greater than 5")```
This is a displayed equation:
$$
a^2 + b^2 = c^2
$$
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are: \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
1
2
When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$ and they are:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
This is a geometric series: \(\begin{equation} S = \sum_{n=0}^{\infty} ar^n = \frac{a}{1 - r} \label{eq:series} \end{equation}\) We can reference the equation as \eqref{eq:series}.
1
2
3
4
5
6
7
8
This is a geometric series:
$$
\begin{equation}
S = \sum_{n=0}^{\infty} ar^n = \frac{a}{1 - r}
\label{eq:series}
\end{equation}
$$
We can reference the equation as \eqref{eq:series}.
For markdown, LaTex inline equation: \(E = m \times c^2\)
For HTML rendering inline equation: \( E = mc^2 \)
\(E = mc^2\)
1
2
3
1. For markdown, LaTex inline equation: $$E = m \times c^2$$
2. For HTML rendering inline equation: \\( E = mc^2 \\)
3.\$$E = mc^2$$
Mermaid SVG
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
1
2
3
4
5
6
7
```mermaid
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d```
{%
include embed/video.html
src='/assets/vid/Vicky - Hiphop - Dont Stop copy.mp4'
poster='/assets/vid/Vicky - Hiphop - Dont Stop-Cover copy.jpg'
title= "Vicky - Hiphop - Don't Stop (Cover)"
%}
You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed:
{%
include embed/video.html
src='/path/to/video.mp4'
types='ogg|mov'
poster='poster.png'
title='Demo video'
autoplay=true
loop=true
muted=true
%}
types — specify the extensions of additional video formats separated by |. Ensure these files exist in the same directory
poster='/path/to/poster.png' — poster image for a video that is shown while video is downloading
title='Text' — title for a video that appears below the video and looks same as for images
autoplay=true — video automatically begins to play back as soon as it can
loop=true — automatically seek back to the start upon reaching the end of the video
Click the hook will locate the footnote[^footnote],
and here is another footnote[^fn-2nd].
{content}
[^footnote]:The footnote source
[^fn-2nd]:The 2nd footnote source
Sherlock - MindPalace