---
title: Text and Typography
author: Cotes Chung
date: 2019-08-08 11:33:00 +0800
categories: [Blogging, Demo]
tags: [typography]
math: true
mermaid: true
image: /assets/img/sample/devices-mockup.png
---
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
H2 - heading
H3 - heading
H4 - heading
---
## Paragraph
I wandered lonely as a cloud
That floats on high o'er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils;
Beside the lake, beneath the trees,
Fluttering and dancing in the breeze.
## List
### Ordered list
1. first item
2. second item
3. third item
### Unordered list
- item 1
- sub item 1
- sub item 2
- item 2
## Block Quote
> This line to shows the Block Quote.
## Tables
| Company | contact | Country |
|:-----------------------------|:-----------------|--------:|
| Alfreds Futterkiste | Maria Anders | Germany |
| Island Trading | Helen Bennett | UK |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
## Link
## Footnote
Click the hook will locate the footnote[^footnote].
## Images
- Default (with caption)
_Full screen width and center alignment_
- Specify width
{: width="400"}
_400px image width_
- Left aligned
{: width="350" class="normal"}
- Float to left
{: width="240" class="left"}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
- Float to right
{: width="240" class="right"}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
## 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
```
## Inline code
This is an example of `Inline Code`.
## 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} $$
## Code Snippet
### Common
```
This is a common code snippet, without syntax highlight and line number.
```
### Specific Languages
#### Console
```console
$ date
Sun Nov 3 15:11:12 CST 2019
```
#### Terminal
```terminal
$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash
```
#### Ruby
```ruby
def sum_eq_n?(arr, n)
return true if arr.empty? && n == 0
arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
end
```
#### Shell
```shell
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
fi;
```
#### Liquid
{% raw %}
```liquid
{% if product.title contains 'Pack' %}
This product's title contains the word Pack.
{% endif %}
```
{% endraw %}
#### HTML
```html