--- 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: src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png width: 850 height: 585 --- 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. ## Lists ### Ordered list 1. Firstly 2. Secondly 3. Thirdly ### Unordered list - Chapter - Section - Paragraph ### Task list - [ ] TODO - [x] Completed - [ ] Defeat COVID-19 - [x] Vaccine production - [ ] Economic recovery - [ ] People smile again ### Description list Sun : the star around which the earth orbits Moon : the natural satellite of the earth, visible by reflected light from the sun ## 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 | ## Links ## Footnote Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2]. ## Images - Default (with caption) ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" } _Full screen width and center alignment_
- Shadow ![Window shadow](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" } _shadow effect (visible in light mode)_
- Left aligned ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
- Float to left ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .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 ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .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 ``` ## 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`. ## Code block ### Common ``` 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 ``` #### 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 %} #### Java ```java private void writeObject(java.io.ObjectOutputStream s) throws java.io.IOException { // Write out any hidden serialization magic s.defaultWriteObject(); for (E e: map.keySet()) s.writeObject(e); } ``` ## Reverse Footnote [^footnote]: The footnote source [^fn-nth-2]: The 2nd footnote source