f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

docs: add tutorial and example for new features

Browse Source
This commit is contained in:
Cotes Chung
2022-12-28 01:20:24 +08:00
parent 6fa1777eb0
commit 8440d42984
2 changed files with 113 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
_posts/2019-08-08-text-and-typography.md
View File

@@ -8,14 +8,12 @@ math: true
mermaid: true
image:
path: /commons/devices-mockup.png
width: 800
height: 500
lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
alt: Responsive rendering of Chirpy theme on multiple devices.
---
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
## Titles
---
# H1 - heading
@@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
<h4>H4 - heading</h4>
---
<br>
## Paragraph
@@ -95,56 +92,6 @@ Moon
Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
## Images
- Default (with caption)
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
_Full screen width and center alignment_
<br>
- Shadow
![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" .w-75 }
_shadow effect (visible in light mode)_
<br>
- Left aligned
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
- Float to left
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
- Float to right
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
## Mermaid SVG
```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
```
## Mathematics
The mathematics powered by [**MathJax**](https://www.mathjax.org/):
$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
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} $$
## Inline code
This is an example of `Inline Code`.
@@ -153,7 +100,7 @@ This is an example of `Inline Code`.
Here is the `/path/to/the/file.extend`{: .filepath}.
## Code block
## Code blocks
### Common
@@ -161,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
This is a common code snippet, without syntax highlight and line number.
```
### Specific Languages
#### Console
```console
$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash
```
#### Shell
### Specific Language
```bash
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
echo "The command was not successful.";
#do the needful / exit
fi;
```
@@ -189,6 +126,58 @@ fi;
```
{: file='_sass/jekyll-theme-chirpy.scss'}
## Mathematics
The mathematics powered by [**MathJax**](https://www.mathjax.org/):
$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
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} $$
## Mermaid SVG
```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
```
## Images
### Default (with caption)
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
_Full screen width and center alignment_
### Left aligned
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
### Float to left
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
### Float to right
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
### Dark/Light mode & Shadow
The image below will toggle dark/light mode based on theme preference, notice it has shadows.
![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
## Video
{% include embed/youtube.html id='Balreaj8Yqs' %}
## Reverse Footnote
[^footnote]: The footnote source