Text and Typography

This post is to show Markdown syntax rendering on Chirpy, 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
  • Setcion
    • Paragraph

¶Task list

• [ ] TODO
• [x] Completed
• Hold on
• [ ] 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

http://127.0.0.1:4000

¶Footnote

Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].

¶Images

• Default (with caption)

Full screen width and center alignment

• Specify width

{: width=“400”}
400px image width

• Left aligned

{: width=“350” .normal}

• Float to left

  {: width=“240” .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” .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

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:

$$\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

$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash

¶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

if [ $? -ne 0 ]; then
    echo "The command was not successful.";
    #do the needful / exit
fi;

¶Liquid

{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

¶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